feat: pdf生成策略调整

src/modules/paper-export/views/PaperTemplateBuild.vue

@@ -258,7 +258,8 @@ export default {
             this.$nextTick(async () => {
               const paperBlob = await buildPdf(
                 {
-                  element: document.getElementById("paper-template-view"),
+                  elements: document.getElementById("paper-template-view")
+                    .children,
                   pageSize: this.paperTempJson.pageConfig.pageSize,
                   scale: this.pdfScale,
                 },
@@ -533,7 +534,7 @@ export default {
 
       let result = true;
       await buildPdf({
-        element: document.getElementById("paper-template-view"),
+        elements: document.getElementById("paper-template-view").children,
         filename: `${this.fieldData.courseName}(${this.fieldData.courseCode})_${this.fieldData.paperName}.pdf`,
         pageSize: this.paperTempJson.pageConfig.pageSize,
         scale: this.pdfScale,
@@ -555,7 +556,7 @@ export default {
       const paperPdfName = `${this.fieldData.courseName}(${this.fieldData.courseCode})_${this.fieldData.paperName}.pdf`;
       const paperBlob = await buildPdf(
         {
-          element: document.getElementById("paper-template-view"),
+          elements: document.getElementById("paper-template-view").children,
           pageSize: this.paperTempJson.pageConfig.pageSize,
           scale: this.pdfScale,
         },
@@ -571,7 +572,7 @@ export default {
       const answerPdfName = `${this.fieldData.courseName}(${this.fieldData.courseCode})_${this.fieldData.paperName}_答案.pdf`;
       const answerBlob = await buildPdf(
         {
-          element: document.getElementById("answer-template-view"),
+          elements: document.getElementById("answer-template-view").children,
           pageSize: "A4",
           scale: this.pdfScale,
         },
@@ -654,7 +655,7 @@ export default {
         .getElementById("paper-template-view")
         .querySelectorAll(".page-box")
         .forEach((dom) => {
-          dom.setAttribute("style", undefined);
+          dom.setAttribute("style", "");
         });
     },
     // scale event

src/plugins/htmlToPdf.js

@@ -1,4 +1,6 @@
-import html2pdf from "html2pdf.js";
+// import html2pdf from "html2pdf.js";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 
 // jsPDF config doc
 // https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
@@ -13,7 +15,7 @@ export const jsPDFConfigs = {
 };
 
 export async function buildPdf(
-  { element, pageSize, filename, scale },
+  { elements, pageSize, filename, scale },
   returnBlob = false
 ) {
   const opt = {
@@ -26,9 +28,38 @@ export async function buildPdf(
     },
   };
 
+  const mergedPdf = await buildPdfFromElements(elements, opt);
+
   if (returnBlob) {
-    return await html2pdf().set(opt).from(element).outputPdf("blob");
+    return await mergedPdf.outputPdf("blob");
   } else {
-    await html2pdf().set(opt).from(element).save();
+    console.log(filename);
+    await mergedPdf.save(filename);
+  }
+}
+
+export async function buildPdfFromElements(domList, pdfOptions) {
+  const mergedPdf = new jsPDF(pdfOptions.jsPDF);
+
+  for (let i = 0; i < domList.length; i++) {
+    const element = domList[i];
+    const canvas = await html2canvas(element, pdfOptions.html2canvas);
+    const blob = await new Promise((resolve) =>
+      canvas.toBlob(
+        resolve,
+        `image/${pdfOptions.image.type}`,
+        pdfOptions.image.quality
+      )
+    );
+    const img = document.createElement("img");
+    img.src = URL.createObjectURL(blob);
+
+    const pdfWidth = mergedPdf.internal.pageSize.getWidth();
+    const pdfHeight = mergedPdf.internal.pageSize.getHeight();
+
+    if (i > 0) mergedPdf.addPage();
+    mergedPdf.addImage(img, "JPEG", 0, 0, pdfWidth, pdfHeight);
   }
+
+  return mergedPdf;
 }