将HTML页面转换为PDF文件并导出

目前，在大多数的管理系统中，都会有这样一个功能：根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程，生成可视化的报表可使用Echarts，D3js等框架。

1.需要引入的文件

html2canvas.js（根据实际情况选择相应的版本）
jspdf.min.js（根据实际情况选择相应的版本）

2.实现思路

（1）在body中将需要生成PDF的HTML复制一份，切记：如果元素中含有ID，则必须重新给定
（2）将新的元素设置为position:absolute; 脱离文档流，因为处于文档流中被浏览器遮挡的部分不会生成PDF。
（3）利用html2canvas.js将新的元素生成图片
（4）利用jspdf.min.js将图片生成PDF文件并保存到本地。


3.实现代码

(1)HTML代码/*将要生成PDF的HTML代码*/
<div id="pdf">
………………………………
</div> (2)JS代码/*复制元素，注意ID*/
$("body").append('<div id="pdf1">…………………………………………………………</div>');
/*设置新元素样式*/
$("#pdf1").css({
"background-color": "#fff",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": $("#pdf").height()
});
/*html2canvas生成图片，jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
background: "#fff",
allowTaint: true,
taintTest: false,
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pageHeight = contentWidth / 592.28 * 841.89;
var leftHeight = contentHeight;
var position = 0;
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var img = new Image();
img.src = pageData;
var pdf = new jsPDF('p', 'pt', 'a4');
img.onload = function() {
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('report_pdf_' + new Date().getTime() + '.pdf');
$("#pdf1").remove();
}
},
})


以上为笔者在项目中的部分核心代码，如有问题，欢迎指正。