问题描述:
网上很多讲述如何用JS保存pdf的demo太多了自己网上搜,我就不PI啰嗦了;我现在要讲的问题是,在生成目标盒子内容很高的情况下(盒子中的内容很长的那种,屏幕都不够装),按demo上的使用方法将代码准备好后,执行下载,就出现了怎么玩弄都去不掉的【黑块】。
引入两个PSD必要文件:
- html2canvas.js
- jspdf.debug.js
<button id="renderPdf">DOWNLOAD PDF</button>
var downPdf = document.getElementById("renderPdf");
downPdf.onclick = function(){
var dom=document.getElementById("content");
dom.style.backgroundColor="#fff";
html2canvas(dom, {
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;
//pdf页面偏移
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', 20, 0, imgWidth, imgHeight);
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
}
})
}
实例:
点击页面按钮 DOWNLOAD PDF 生成如下PDF
故障:PDF中只有我当前点击下载时屏幕显示的部分,A4纸余下的部分都成了黑块。惊不惊喜,意不意外!
几天的自虐问题终于解决了
解决办法如下:
就这么简单,惊不惊喜,意不意外!