通过纯js将网页保存为pdf，A4分页，无需服务端参与

1.引入js库文件：

<script src="../static/jspdf/html2canvas.js"></script><script src="../static/jspdf/jsPdf.debug.js"></script>

2.思路：

用html2canvas截取页面（html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来），然后用jsPDF来生成pdf文件。

3.核心代码：

为了保证生成的pdf空白区域没有黑色背景，在操作之前先把背景设置为白色（因为沒有背景色，截取时会以黑色填充）

$("#"+divID).css("background-color","white");

解决html2canvas截取页面太模糊，创建一个新的canvas：

var canvas_new = document.createElement("canvas");var scale = 2;var w = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).width);var h = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).height);

将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了：

canvas_new.width = w * scale;canvas_new.height = h * scale;canvas_new.getContext("2d").scale(scale, scale);

进行导出：

var options = {canvas: canvas_new};html2canvas(document.querySelector("#"+divID),options)..then(function(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+45;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('', 'pt', 'a4');//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页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();}}}pdf.save('name.pdf');

---------------------
作者：致虚极POLE守静笃
来源：CSDN
原文：https://blog.csdn.net/u011821334/article/details/79389426
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件