🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
路径D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html ~~~ <script src="https://cdn.bootcss.com/jspdf/1.3.5/jspdf.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> ~~~ 添加html ~~~ <!-- 导出pdf --> <span style="position:fixed;z-index:999;top:10px;right:10px;display:block;width:80px;height:30px;line-height:30px;color:#fff;border-radius:8px;cursor: pointer;background: orange;text-align: center;"; onclick="prictPage()">导出PDF</span> <!-- end --> ~~~ ![](https://box.kancloud.cn/4c0ea18a8434705a1276e182f0794d10_817x80.png) `下面写js方法在</body> 这里写。。。。。。。。。。。 </html>` ~~~ <script> function prictPage(){ html2canvas(document.body,{allowTaint:true,taintTest:false,useCORS: true}).then(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 = canvas.toDataURL('image/jpeg', 1.0); var 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(); } } } var timestamp =Date.parse(new Date()) var dowfile = timestamp+'.pdf'; // pdf.save('content.pdf'); pdf.save(dowfile); }); } </script> ~~~