JS导出JSP页面为PDF

导出PDF的内容，任意的DOM节点 , 需要导入html2canvas.js和jspdf.debug.js

//part1:设置canvas的参数
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 【重要】关闭抗锯齿...老重要了 -_-||| 导出的pdf也变清晰了  ,抗锯齿和放大并存！！！！
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
//果然还是得canvas放大，才能清晰    诶，，得意忘形了，放大倍数改成了4，生成的图片一百多M，弄得网页崩溃了。。。
canvas.width = document.body.clientWidth * 2;
canvas.height = document.body.clientHeight * 2;
ctx.scale(2,2);

//part2:使用canvas绘制图片，图片来源是id为body的dom *O* 然后用jsPDF将图片导出成pdf
html2canvas($("#body"), {
canvas:canvas,
onrendered: function(canvas) {
var imgData = canvas.toDataURL();
var img = new Image();
img.src = imgData;
//这儿是图片显示的宽高了，不影响分辨率，放大缩小一样的
$(img).css({
        "width": canvas.width / 4 + "px",
        "height": canvas.height / 4 + "px",
})

//根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.225是因为比例问题
img.onload = function() {
//这句话是在body后面显示一张图片
//document.body.appendChild(img);
//此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
if (this.width > this.height) {
    var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
} else {
    var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
}
doc.addImage(img, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
//根据下载保存成不同的文件名
doc.save('report_pdf_' + new Date().getTime() + '.pdf');
}
},
background: "#FFFFFF",
//这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。
allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
});