路徑：ireport365.wa/js/enduser/designer/vs-common.js 技術棧: html2canvas jspdf.js ``` function prictPage(){ var shareContent = document.getElementById('gridster'); var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; var canvas = document.createElement("canvas"); var content = canvas.getContext("2d"); var scale = 2; var rect = shareContent.getBoundingClientRect();//獲取元素相對于視察的偏移量 canvas.width = width * scale; canvas.height = height * scale; content.scale(scale, scale); content.translate(-rect.left,-rect.top);//設置context位置，值為相對于視窗的偏移量負值，讓圖片復位 var opts = { dpi: window.devicePixelRatio*scale, scale: scale, canvas: canvas, logging: true, width: width, height: height, // Whether to allow cross-origin images to taint the canvas allowTaint:true, // Whether to test each image if it taints the canvas before drawing them taintTest:false, // 如果沒有開啟html2canvas的useCORS配置項，html2canvas會正常執行且不會報錯，但是不會輸出對應的CDN圖片 // （已測試同時包含CDN的圖片和本地圖片的資源的頁面，但是只有本地圖片能夠被正常渲染出來） useCORS: true, onrendered: function(canvas) { var context = canvas.getContext('2d'); // 【重要】關閉抗鋸齒 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; //document.body.appendChild(canvas); var contentWidth = canvas.width; var contentHeight = canvas.height; //一頁pdf顯示html頁面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html頁面高度 var leftHeight = contentHeight; //頁面偏移 var position = 0; //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = ''; var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.onload = function () { pageData = canvas.toDataURL('image/PNG', 1.0); document.getElementById('canvasImg').src = pageData; context.drawImage(document.getElementById('canvasImg'), 0, 0); mkPdf(pageData); }; img.src = '/images/empty-page.png'; function mkPdf(pageData){ var pdf = new jsPDF('p', 'pt', 'a4'); //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89) //當內容未超過pdf一頁顯示的范圍，無需分頁 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'PNG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白頁 if(leftHeight > 0) { pdf.addPage(); } } } var timestamp =Date.parse(new Date()); var dowfile = timestamp+'.pdf'; // pdf.save('content.pdf'); pdf.save(dowfile); } } }; html2canvas(shareContent, opts); } ```