[转]JS导出PDF

通过纯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博客文章一键转载插件