浏览代码

fix:修改导出方法

wangsisi 4 月之前
父节点
当前提交
ad3e87bc6d
共有 1 个文件被更改,包括 46 次插入3 次删除
  1. 46 3
      src/views/authentic/Pdf.vue

+ 46 - 3
src/views/authentic/Pdf.vue

@@ -6,7 +6,7 @@
       :model-value="showDialog"
       @close="closeDialog()"
   >
-    <div  class="pdf-main">
+    <div class="pdf-main">
       <div class="title" >
         <div class="name" ></div>
         <div class="pdf-close cursor-pointer" @click="closeDialog"></div>
@@ -14,7 +14,7 @@
       <div id="printTest" class="pdf-dialog-box">
         <div class="pdf-my-body"  >
         <div class="pdfBox" >
-          <div class="a4" >
+          <div class="a4" id="pdfDom">
             <div class="a4_title">确权单</div>
             <table class="a4_table" border=1 style="border-collapse: collapse;">
               <tr>
@@ -53,7 +53,8 @@
       </div>
       </div>
       <div style="text-align: left">
-        <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button>
+         <el-button size="large" color="#626aef"  @click="html2Canvas1('test')">打印</el-button>
+        <!-- <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button> -->
         <!--          <el-button size="large" color="#626aef"  @click="closeDialog">关闭</el-button>-->
       </div>
 
@@ -62,6 +63,8 @@
 </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";
@@ -131,6 +134,46 @@ 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')
+      })
+}
+
 
 
 onMounted(()=>{