fix:修改打印名称

src/utils/html2Canvas.js

@@ -0,0 +1,44 @@
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+
+function printPdf(title) {
+  html2Canvas(document.querySelector("#pdfDom"), {
+    //获取文档中 id="pdfDom" 的元素,返回匹配指定选择器的第一个元素
+    allowTaint: true, //允许跨源图像污染画布
+  }).then(function (canvas) {
+    let contentWidth = canvas.width; // 获得容器的宽
+    let contentHeight = canvas.height; // 获得容器的高
+    //一页pdf显示html页面生成的canvas高度;
+    let pageHeight = (contentWidth / 592.28) * 841.89;
+    let leftHeight = contentHeight; //未生成pdf的html页面高度
+    let position = 0; //页面偏移
+    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+    let imgWidth = 595.28;
+    let imgHeight = (592.28 / contentWidth) * contentHeight;
+    //图片格式,(0-1,数字越大，代表导出的图片越清晰,默认值：0.92)
+    let pageData = canvas.toDataURL("image/jpeg", 1.0);
+    //第一个参数: l：横向  p：纵向
+    //第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
+    //格式，默认为“a4”,如果想用自己的格式例如[595.28, 841.89]
+    let PDF = new JsPDF("", "pt", "a4");
+    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+    //当内容未超过pdf一页显示的范围，无需分页
+    if (leftHeight < pageHeight) {
+      PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
+    } else {
+      while (leftHeight > 0) {
+        PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
+        leftHeight -= pageHeight;
+        position -= 841.89;
+        //避免添加空白页
+        // if (leftHeight > 0) {
+        //   PDF.addPage()
+        // }
+      }
+    }
+    // 导出pdf文件命名
+    PDF.save(title + ".pdf");
+  });
+}
+
+export default printPdf

src/views/authentic/Pdf.vue

@@ -53,7 +53,7 @@
       </div>
       </div>
       <div style="text-align: left">
-         <el-button size="large" color="#626aef"  @click="html2Canvas1('test')">打印</el-button>
+         <el-button size="large" color="#626aef"  @click="handlePrint">打印</el-button>
         <!-- <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button> -->
         <!--          <el-button size="large" color="#626aef"  @click="closeDialog">关闭</el-button>-->
       </div>
@@ -63,14 +63,13 @@
 </template>
 
 <script setup>
-import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
 import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
 import {useStore} from "vuex";
 import {WKT} from "ol/format";
 import PdfMap from "./pdfMap";
 import { dateFormat } from "@/utils/date_util";
 import {getAreaByWkt} from "../../utils/map";
+import printPdf from "@/utils/html2Canvas";
 const emit = defineEmits(["closeDialog","success"])
 const state = useStore().state;
 const sendConfirmShow = ref(false)
@@ -134,47 +133,12 @@ function toImg() {
   // let dataURL = canvas.toDataURL('image/webp');
   //   imgUrl.value = dataURL;
 }
-function html2Canvas1(){
-html2Canvas(document.querySelector('#pdfDom'), {//获取文档中 id="pdfDom" 的元素,返回匹配指定选择器的第一个元素
-        allowTaint: true  //允许跨源图像污染画布
-      }).then(function (canvas) {
-        let contentWidth = canvas.width   // 获得容器的宽
-        let contentHeight = canvas.height // 获得容器的高
-        //一页pdf显示html页面生成的canvas高度;
-        let pageHeight = contentWidth / 592.28 * 841.89
-        let leftHeight = contentHeight  //未生成pdf的html页面高度
-        let position = 0   //页面偏移
-        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-        let imgWidth = 595.28
-        let imgHeight = 592.28 / contentWidth * contentHeight
-        //图片格式,(0-1,数字越大，代表导出的图片越清晰,默认值：0.92)
-        let pageData = canvas.toDataURL('image/jpeg', 1.0)
-        //第一个参数: l：横向  p：纵向
-        //第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
-        //格式，默认为“a4”,如果想用自己的格式例如[595.28, 841.89]
-        let PDF = new JsPDF('', 'pt', 'a4')
-        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
-        //当内容未超过pdf一页显示的范围，无需分页
-        if (leftHeight < pageHeight) {
-          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-        } else {
-          while (leftHeight > 0) {
-            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-            leftHeight -= pageHeight
-            position -= 841.89
-            //避免添加空白页
-            if (leftHeight > 0) {
-              PDF.addPage()
-            }
-          }
-        }
-        // 导出pdf文件命名
-        // PDF.save(title + '.pdf')
-        PDF.save('test.pdf')
-      })
-}
-
 
+const handlePrint = () =>{
+    let {masterName, farmName, masterTel} = rowData.value
+    const title =`${farmName}-${masterTel}-${masterName}`
+    printPdf(title)
+}
 
 onMounted(()=>{
   VE_API.authentic.getDetails({id:rowId.value}).then(({data})=>{