生成的pdf只有页面窗口可见的区域,有滚动条的下面没有生成出来。如果截取是body的这个层级,而刚好body设置了overflow: hidden;那超出的部分是永远截取不到的,因为这个节点的dom高就是窗口可见的高度,并不包含滚动条多出来的部分。只需要在导出之前将overflow:aotu设置成visible(默认即可);导出提后再设置回去。
代码
export() {
console.log('導出');
$('.right-div').css({
'overflow-y': 'visible',
'height': 'auto'
});
let export_content = $('#export_content');
let copyDom = $('<div/>');
copyDom.addClass('super');
copyDom.width(export_content.width() + 'px');
copyDom.height(export_content.height() + 'px');
$('body').append(copyDom);
let cont = document.getElementById('export_content');
html2canvas(export_content, {
onrendered: (canvas) => {
let cW = canvas.width; // 955
let cH = canvas.height; // 2965
// 一页pdf显示html页面生成的canvas高度;
let pageH = cW / 592.28 * 841.89; // 1357.4744208820155
// 未生成pdf的html页面高度
let leftH = cH; // 2965
// pdf页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgW = 595.28;
let imgH = 592.28 / cW * cH;
console.log(cW, cH, pageH, leftH, position, imgW, imgH);
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new jsPDF('', 'pt', 'a4');
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
if (leftH < pageH) {
pdf.addImage(pageData, 'JPEG', 0, position, imgW, imgH);
}else {
while (leftH > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgW, imgH);
leftH -= pageH;
position -= 841.89;
// 避免添加空白页
if (leftH > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
$('.super').remove();
$('.right-div').css({
'overflow-y': 'auto',
'height': '100%'
});
},
background: '#fff'
});
}