1

package.json

@@ -17,8 +17,10 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "animate.css": "^4.1.1",
     "axios": "^1.3.5",
+    "dom-to-image": "^2.6.0",
     "element-plus": "^2.3.3",
     "install": "^0.13.0",
+    "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "naf-core": "^0.1.2",

src/util/htmlToPdf.ts

@@ -0,0 +1,102 @@
+import domtoimage from 'dom-to-image'
+import JsPDF from 'jspdf'
+import { addfont } from './testfont'
+/**
+ * @param  type  1：纵，2：横
+ * @param  ele
+ * @param  pdfName
+ * */
+function createPDF(type: any, ele: any, pdfName: any, other: any) {
+  domtoimage
+    .toJpeg(ele, {})
+    .then(function (dataUrl: any) {
+      if (type == '1') {
+        oneGetPDF(ele, dataUrl, pdfName, other)
+      } else if (type == '2') {
+        twoGetPDF(ele, dataUrl, pdfName, other)
+      }
+    })
+    .catch(function (error: any) {
+      console.error('生成失败', error)
+    })
+}
+function oneGetPDF(ele: any, url: any, name: any, other: any) {
+  // 图片宽度，高度
+  const contentWidth = ele.offsetWidth
+  let contentHeight = ele.offsetHeight
+  const pageHeight = (contentWidth / 592) * 841
+  // 偏移
+  let position = 0
+  //a4纸的尺寸[595,841]
+  const imgWidth = 595
+  const imgHeight = (595 / contentWidth) * contentHeight
+  const pdf = new JsPDF('p', 'pt', 'a4')
+  // 添加字体
+  pdf.setFont('simfang')
+  if (contentHeight < pageHeight) {
+    pdf.addImage(url, 'JPEG', 0, position, imgWidth, imgHeight)
+  } else {
+    while (contentHeight > 0) {
+      pdf.addImage(url, 'JPEG', 0, position, imgWidth, imgHeight)
+      contentHeight -= pageHeight
+      position -= 841
+      if (contentHeight > 0) {
+        pdf.addPage()
+      }
+    }
+  }
+  // 水印
+  if (other && other.is_water == true) {
+    addWaterMark(pdf, other)
+  }
+  pdf.save(name)
+}
+function twoGetPDF(ele: any, url: any, name: any, other: any) {
+  // 图片宽度，高度
+  const contentWidth = ele.offsetWidth
+  let contentHeight = ele.offsetHeight
+  const pageHeight = (contentWidth / 841) * 595
+  // 偏移
+  let position = 0
+  //a4纸的尺寸[841,595]
+  const imgWidth = 841
+  const imgHeight = (841 / contentWidth) * contentHeight
+  const pdf = new JsPDF('l', 'pt', 'a4')
+  pdf.setFont('simfang')
+  if (contentHeight < pageHeight) {
+    pdf.addImage(url, 'JPEG', 0, 0, imgWidth, imgHeight)
+  } else {
+    while (contentHeight > 0) {
+      pdf.addImage(url, 'JPEG', 0, position, imgWidth, imgHeight)
+      contentHeight -= pageHeight
+      position -= 595
+      if (contentHeight > 0) {
+        pdf.addPage()
+      }
+    }
+  }
+  // 水印
+  if (other && other.is_water == true) {
+    addWaterMark(pdf, other)
+  }
+  pdf.save(name)
+}
+function addWaterMark(pdf: any, other: any) {
+  const totalPages = pdf.internal.getNumberOfPages()
+  addfont(pdf)
+  pdf.addFont('bolds', 'b', 'normal')
+  pdf.setFont('b')
+  for (let i = 1; i <= totalPages; i++) {
+    pdf.setPage(i)
+    pdf.saveGraphicsState()
+    pdf.setGState(pdf.GState({ opacity: 0.5 }))
+    pdf.setFontSize(18)
+    pdf.setTextColor(255, 0, 0)
+    pdf.text(other.water, 150, pdf.internal.pageSize.height / 1.3, 45)
+  }
+  return pdf
+}
+
+export default {
+  createPDF
+}