```
```JavaScript
function downloadPDF(target, title) {
target.style.background = "#FFFFFF";
html2canvas(target, {
onrendered : 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;
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(title + ".pdf");
}
})
}
```
其中target是目标节点的JavaScript对象,title是生成文件的名字
```JavaScript
$(function() {
$(".download").click(function() {
$("html,body").animate({scrollTop:0}, 500);
setTimeout(function(){
try{
var title =
$("#userBasic").find("td:eq(0)").html() + "_" +
$("#userBasic").find("td:eq(3)").html() + "_" +
$("h1").html();
downloadPDF($(".content")[0],title);
}catch(err){
layer.msg("下载失败！",{icon: 2});
}
},500);
});
});
```
但是存在一个问题,就是只有在页面回到顶部的时候,生成的pdf文件才不会有黑块出来,所以只好先拉回顶部,在生成文件.
加载中...