900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 带滚动条html转pdf只有一页 关于html页面导出pdf滚动条以下显示不全的问题

带滚动条html转pdf只有一页 关于html页面导出pdf滚动条以下显示不全的问题

时间:2018-11-07 00:05:31

相关推荐

带滚动条html转pdf只有一页 关于html页面导出pdf滚动条以下显示不全的问题

生成的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 = $('

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.474420885

// 未生成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'

});

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。