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