9--15

src/components/Report.vue

@@ -1,6 +1,11 @@
 <style lang="scss" scoped>
+.top{
+  text-align: right;
+  padding: 15px;
+}
 #print-part{
   width: 1240px;
+  margin: 0 auto;
   .page{
     width: 100%;
     height: 1754px;
@@ -11,22 +16,66 @@
     }
   }
 }
+#singleCanvas{
+  display: none;
+}
 </style>
 <template>
 <div class="report">
-  <button @click="down">导出</button>
+  <div class="top">
+    <el-button type="primary" plain @click="download">导出PDF</el-button>
+  </div>
   <div id="print-part">
     <div class="page">
-      <h1>111111111</h1>
+      <h1>A</h1>
+    </div>
+    <div class="page">
+      <h1>B</h1>
+    </div>
+    <div class="page">
+      <h1>C</h1>
+    </div>
+    <div class="page">
+      <h1>D</h1>
+    </div>
+    <div class="page">
+      <h1>E</h1>
+    </div>
+    <div class="page">
+      <h1>F</h1>
+    </div>
+    <div class="page">
+      <h1>G</h1>
+    </div>
+    <div class="page">
+      <h1>H</h1>
+    </div>
+    <div class="page">
+      <h1>I</h1>
+    </div>
+    <div class="page">
+      <h1>J</h1>
+    </div>
+    <div class="page">
+      <h1>K</h1>
+    </div>
+    <div class="page">
+      <h1>L</h1>
+    </div>
+    <div class="page">
+      <h1>M</h1>
+    </div>
+    <div class="page">
+      <h1>N</h1>
     </div>
     <div class="page">
-      <h1>222222222</h1>
+      <h1>O</h1>
     </div>
     <div class="page">
-      <h1>333333333</h1>
+      <h1>P</h1>
     </div>
   </div>
-  <canvas id="previewCanvas" width="1240" height="841.89">
+  <canvas id="singleCanvas" width="1240" height="1754">
   </canvas>
 </div>
 </template>
@@ -41,6 +90,8 @@ export default {
   },
   data () {
       return {
+        imgWidth: 595.28,
+        imgHeight: 841.89,
         PDF: new JsPDF('p', 'pt', 'a4')
       }
   },
@@ -50,75 +101,31 @@ export default {
   mounted(){
   },
   methods: {
-    down(){
+    download(){
+      this.PDF = new JsPDF('p', 'pt', 'a4');
       html2Canvas(document.getElementById('print-part'), {
           allowTaint: true
       })
       .then(canvas => {
-          let contentWidth = canvas.width;
-          let contentHeight = 1754;
-
-          let wholeHeight = canvas.height;
+          let ctx = canvas.getContext("2d");
+          let singleCanvas = document.getElementById('singleCanvas');
+          let singleCtx = singleCanvas.getContext("2d");   
 
-          let imgWidth = 595.28;
-          let imgHeight = 841.89;
+          let contentWidth = singleCanvas.width;
+          let contentHeight = singleCanvas.height;
 
-          let ctx = canvas.getContext("2d");
-          let temp = canvas.toDataURL('image/jpeg', 1.0);
-          // let img = new Image();
-          // img.src = canvas.toDataURL('image/jpeg', 1.0);
-          // let arrLength = 3;
-          let imgArr = [];                   
+          let pageNum = canvas.height / contentHeight;
 
-          // let previewCanvas = document.getElementById('previewCanvas');//获取备用画布
-          // let previewCtx = previewCanvas.getContext("2d");   
+          for(let i = 0;i < pageNum; i++){
+            let pageImg = ctx.getImageData(0,contentHeight * i,contentWidth,contentHeight * (i + 1));
+            singleCtx.putImageData(pageImg,0,0);
+            let pageData = singleCanvas.toDataURL('image/jpeg', 1.0);
+            this.PDF.addImage(pageData, 'JPEG', 0, 0, this.imgWidth, this.imgHeight);
+            if(i + 1 < pageNum){
+              this.PDF.addPage();
+            }
+          }
 
-          // let cData = ctx.getImageData(0,contentHeight,contentWidth,contentHeight*2);
-          // previewCtx.putImageData(cData,0,0,0,0,imgWidth,imgHeight)
-          // imgArr.push(cData);
-          // let y = 0;
-          // for(let i = 1; i <= arrLength; i++){
-          //   previewCanvas.drawImage(img,0,contentHeight * (i - 1),contentWidth,contentHeight * i,0,imgHeight * (i - 1),imgWidth,imgHeight * i);
-              // previewCanvas.height = imgHeight * (arrLength - i);
-              // let imgData = ctx.getImageData(0,y,imgWidth,imgHeight);
-              // previewCtx.putImageData(imgData,0,0);
-              // imgArr.push(previewCanvas.toDataURL("image/jpeg",1.0));
-              // y += imgHeight;
-            // }
-          // this.PDF.addImage(imgArr[0], 'JPEG', 0, 0, imgWidth,imgHeight);// img, PNG/JPG, x（左侧偏移）, y(上侧便宜), w, h,
-          this.PDF.addImage(temp, 'JPEG', 0, -841.89, imgWidth,1754);// img, PNG/JPG, x（左侧偏移）, y(上侧便宜), w, h,
-          // for(let i = 0; i < 2;i++){
-            // this.PDF.addImage(wholeData, 'JPEG', 0, position, imgWidth, 1754);
-            // position += 841.89;
-            // this.PDF.addPage();
-            // this.PDF.addImage(wholeData, 'JPEG', 0, -841.89, imgWidth, 1754);
-            // this.PDF.addPage();
-            // this.PDF.addImage(wholeData, 'JPEG', 0, -(841.89 * 2), imgWidth, 1754);
-            // this.PDF.addPage();
-            // this.PDF.addImage(wholeData, 'JPEG', 0, -(841.89 * 3), imgWidth, 1754);
-          // }
-          // this.PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);
-          // this.PDF.addPage();
-          // let pageHeight = contentWidth / 592.28 * 841.89;
-          // let imgWidth = 595.28;
-          // let imgHeight = imgWidth / contentWidth * contentHeight;
-          // let leftHeight = contentHeight;
-          // let position = 0;
-          // let pageData = canvas.toDataURL('image/jpeg', 1.0);
-          // let PDF = new JsPDF('', 'pt', 'a4');
-          // 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();
-          //         }
-          //     }
-          // }
-          
           this.PDF.save('title' + '.pdf');
       });
     }