js jsPDF 及 html2canvas－程式員:告一個段落才能睡的好。

# JS

       function exportapply(){

           var pdfCanvas = $('#canvasID');

           var pdfctx = $(pdfCanvas)[0].getContext('2d'), file, reader = new FileReader();
           pdfctx.scale(2,2);
           var pdfctxX = 0; // x 軸座標
           var pdfctxY = 0; // y 軸座標
           var buffer = 20; //左圖和右圖中間的間距

$("canvas").each(function(index) {

           var canvasHeight = 200;
           var canvasWidth = 230;

pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
               pdfctxX += canvasWidth + buffer;

// 左右排
if (index % 2 === 1) {
           pdfctxX = 0;
           pdfctxY += canvasHeight + buffer;
           }
           });

           //將canvas轉為圖片，最後在加到jsPDF中

           let pdf = new jsPDF({
               orientation: 'p',
               unit: 'px',
               format: [600, 840],
               precision: '12',
               putOnlyUsedFonts:false
           });

           //var image = $(pdfCanvas)[0].toDataURL("image/png",1.0);

//以html2canvas制作頁面截圖列印
           html2canvas(document.querySelector("#canvasID")).then(canvas => {

               // 新增程式碼返回圖片的URL,設定為png格式
               var image = canvas.toDataURL("image/png")

                   // 20, 20, 控制文字距離左邊，與上邊的距離
                   pdf.addImage(image, 'PNG', 20,20);
                   // download the pdf
                   pdf.save('Report.pdf');
           });
       }

## html
<canvas id="canvasID" width=1080 height=1680 style='width:590px;height:840px;border:0px'></canvas>

## 成果