html2canvas+jspdf踩坑之路
最近刚完成了项目中所有模块的详情页导出pdf功能。本来开始后端接了这个活，前端只要传过去单号就好，可是做到最后一直实现不来，页面总是显示一半，于是，后端把活让给了我?
还好，同组的其他伙伴项目中有用到过，给了我些帮助。
具体实现思路是：html2canvas 截屏页面快照，然后把照片插入到pdf页面内。
遇到的问题有：
1）快照是空白的
首先页面DOM布局很重要，如果布局比较乱，很容易打印出空白页面。我们要知道html2canvas 截屏的元素是相对body元素定位的，所以我这里把要截屏的DOM元素copy了一份，放在body元素里。
let targetDom = document.querySelector('#pdfWrap');
let copyDom = targetDom.cloneNode(true);
copyDom.classList.add("copydom");
document.body.appendChild(copyDom);
2）pdf宽度很大，在a4纸打印不够
打印出来的PDF是等比例的缩放字体大小，如果宽度很宽，字体就会变得很小很小。这个时候就要和PM沟通协商，看看想怎么解决。
3）快照图片不显示
原因是跨域请求了图片资源，html2canvas 默认是不跨域的，所以在这里要设置下可跨域。
![]()
html2canvas(copyDom, {
useCORS: true
})
4）快照截屏是当前可视窗口大小，没法滚动
我们页面比较长，有滚动条，所以会出现当前问题。设置当前要截屏的DOM元素的宽度和高度都为目标元素的滚动高度。
copyDom.style.height = targetDom.scrollHeight + "px";
copyDom.style.width = targetDom.scrollWidth + "px";
5）页面表格内容超出用省略号显示的解决办法
和PM沟通，需要把省略掉掉内容折行展示出来。html2canvas 的截图原则是所见即所得，所以页面是什么样子，打印出来是什么样子。因此，我需要在新的copy DOM元素下改变折行样式。(增加这行类名：export-mulit-line)
let recordDom = copyDom.getElementsByClassName('approval-records')[0];
let recordTableDom = recordDom.getElementsByClassName('data-table')[0];
recordTableDom.classList.add("export-mulit-line");
⚠️：这里涉及到了折行，页面高度会有所改变，所以要增加copyDOM元素的高度～(appendHeight即为变化的高度)
copyDom.style.height = targetDom.scrollHeight + appendHeight + "px";
总体实现代码：
// 判断是否多行
isMultiline(arr, num) {
return arr.some(e => {
return e.remark && e.remark.length > num;
});
},
getPdf(dom, title) {
this.loading = true;
let targetDom = document.querySelector('#pdfWrap');
let copyDom = targetDom.cloneNode(true);
copyDom.classList.add("copydom");
// 多行展示预算信息
let appendHeight = 0;//折行增加的高度
copyDom.style.height = targetDom.scrollHeight + appendHeight + "px";
copyDom.style.width = targetDom.scrollWidth + "px";
document.body.appendChild(copyDom);
utils.exportPDF(copyDom, this.orgInfo.orgName).then(v => {
this.loading = v;
});
}
}
utils.js
// 导出PDF
async exportPDF(copyDom, activityName) {
await html2canvas(copyDom, {
useCORS: true
})
.then(canvas => {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = contentWidth / 592.28 * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 555.28;
let imgHeight = 555.28 / contentWidth * contentHeight;
console.log(contentHeight);
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let PDF = new JsPDF('', 'pt', 'a4');
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(activityName + '.pdf');
});
return false;
}
html2canvas官网
发表评论 (审核通过后显示评论)：