pdf导出模糊问题

src/views/shengde/productionSystem/purchase/contract/contractDetails.vue

@@ -52,8 +52,8 @@
       </el-col>
     </el-row>
 
-    <el-dialog title="生成PDF" v-if="openPdf" :visible.sync="openPdf" width="770px" append-to-body>
-      <div id="pdfContent" style="width: 726px">
+    <el-dialog title="生成PDF" v-if="openPdf" :visible.sync="openPdf" width="660px" append-to-body>
+      <div id="pdfDom" style="width: 616px">
         <div class="con">
           <div style="font-size: 24px; font-weight: 700; padding: 16px; text-align: center">福清市胜德体育用品有限公司</div>
           <div style="font-size: 24px; padding: 8px 0 4px 0; text-align: center; border-bottom: 2px solid black">采购合同</div>
@@ -216,6 +216,8 @@ import { mapGetters } from 'vuex'
 import SubscriptionDetails from '@/views/shengde/group/subscription/management/details/index'
 import { purchaseGeneratePdfV2 } from '@/api/shengde/productionSystem/purchase/contract'
 import Utils from '@/util/transit'
+import html2canvas from 'html2canvas'
+import JsPDF from 'jspdf'
 
 export default {
   name: 'contractDetails',
@@ -279,6 +281,103 @@ export default {
       }
       this.openPdf = true
     },
+    getPdf(title) {
+      // pdfDom 这个就是你vue页面中定义的ID  比如<div id="pdfDom">  这个也要避下雷
+      const element = document.getElementById('pdfDom')
+      console.log(element)
+      window.pageYoffset = 0
+      document.documentElement.scrollTop = 0
+      document.body.scrollTop = 0
+      setTimeout(() => {
+        const nowDate = new Date()
+        const date = {
+          year: nowDate.getFullYear(),
+          month: nowDate.getMonth() + 1,
+          date: nowDate.getDate(),
+          hours: nowDate.getHours(),
+          minutes: nowDate.getMinutes(),
+          seconds: nowDate.getSeconds(),
+        }
+        const newmonth = date.month > 10 ? date.month : '0' + date.month
+        const newday = date.date > 10 ? date.date : '0' + date.date
+        const newminutes = date.minutes < 10 ? '0' + date.minutes : date.minutes
+        const newseconds = date.seconds < 10 ? '0' + date.seconds : date.seconds
+        const value = date.year + newmonth + newday + date.hours + newminutes + newseconds
+        let id = ''
+        //创建一个画布    ---  增加导出的pdf水印 ！！
+        let can = document.createElement('canvas')
+        //设置画布的长宽
+        can.width = 400
+        can.height = 500
+        let cans = can.getContext('2d')
+        //旋转角度
+        cans.rotate((-15 * Math.PI) / 180)
+        cans.font = '18px Vedana'
+        //设置填充绘画的颜色、渐变或者模式
+        cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
+        //设置文本内容的当前对齐方式
+        cans.textAlign = 'left'
+        //设置在绘制文本时使用的当前文本基线
+        cans.textBaseline = 'Middle'
+        //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
+        //cans.fillText(value, can.width / 8, can.height / 2)
+        let div = document.createElement('div')
+        div.id = id
+        div.style.pointerEvents = 'none'
+        div.style.top = '2000px'
+        div.style.left = '-2000px'
+        div.style.position = 'fixed'
+        div.style.zIndex = '100000'
+        div.style.width = document.getElementById('pdfDom').scrollHeight + 'px'
+        div.style.height = document.getElementById('pdfDom').scrollHeight + 'px'
+        div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+        document.getElementById('pdfDom').appendChild(div) // 到页面中
+        console.log(html2canvas)
+        html2canvas(element, {
+          allowTaint: true,
+          useCORS: true, // 需要注意，element的 高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！
+          scale: 2, // 提升画面质量，但是会增加文件大小
+          height: document.getElementById('pdfDom').scrollHeight,
+          windowHeight: document.getElementById('pdfDom').scrollHeight,
+        }).then(function (canvas) {
+          var contentWidth = canvas.width
+          var contentHeight = canvas.height
+          console.log('contentWidth', contentWidth)
+          console.log('contentHeight', contentHeight)
+          // 一页pdf显示html页面生成的canvas高度;
+          var pageHeight = (contentWidth * 841.89) / 592.28
+          // 未生成pdf的html页面高度
+          var leftHeight = contentHeight
+          console.log('pageHeight', pageHeight)
+          console.log('leftHeight', leftHeight)
+          // 页面偏移
+          var position = 0
+          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          var imgWidth = 595.28
+          var imgHeight = (592.28 / contentWidth) * contentHeight
+          var pageData = canvas.toDataURL('image/jpeg', 1.0)
+          var pdf = new JsPDF('', 'pt', 'a4')
+          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          // 当内容未超过pdf一页显示的范围，无需分页
+          if (leftHeight < pageHeight) {
+            console.log('没超过1页')
+            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+          } else {
+            while (leftHeight > 0) {
+              console.log('超过1页')
+              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+              leftHeight -= pageHeight
+              position -= 841.89
+              // 避免添加空白页
+              if (leftHeight > 0) {
+                pdf.addPage()
+              }
+            }
+          }
+          pdf.save(title + '.pdf')
+        })
+      }, 1000)
+    },
     clickDownload() {
       const loading = this.$loading({})
       setTimeout(() => {
@@ -286,7 +385,8 @@ export default {
         if (this.pdfDetail.purchaseCode) {
           fileName = this.pdfDetail.purchaseCode
         }
-        this.ExportSavePdf(fileName, '')
+        this.getPdf(fileName)
+        // this.ExportSavePdf(fileName, '')
         loading.close()
       }, 500)
     },
@@ -326,7 +426,7 @@ export default {
   font-family: 'Times New Roman', 'SimSun' !important;
   color: black !important;
   font-size: 12px !important;
-  width: 705px;
+  width: 595px;
   text-align: left;
   background-color: white;
   padding: 16px;