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

最新推荐文章于 2024-03-06 10:52:27 发布

dalle_openai

最新推荐文章于 2024-03-06 10:52:27 发布

阅读量5k

点赞数 1

文章标签：带滚动条html转pdf只有一页

在将带有滚动条的HTML页面转换为PDF时，遇到问题：只有可视区域的内容被导出，滚动条下方的内容缺失。解决方法是在导出前将`overflow-y`设置为`visible`，导出后恢复为`auto`。通过使用html2canvas和jsPDF库，根据canvas的大小计算每页PDF的高度，并循环添加到PDF中，确保所有内容都被包含在内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成的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');