Laravel中使用html2pdf导出超大图表内容截断问题求助

问题出在你给图表容器设置了overflow: scroll/auto，html2pdf默认只会抓取元素的可见区域，所以导出的PDF只显示半张图表。下面是具体的解决办法：

方案一：临时修改overflow属性再导出 #

在触发导出前，先把容器的overflow改成visible，导出完成后再恢复原来的属性：

$('#btn-one').click(function() {
    let div = document.querySelector(".tutto");
    // 保存原来的overflow属性
    const originalOverflow = div.style.overflow;
    // 临时设置为visible，让完整内容显示出来
    div.style.overflow = 'visible';
    
    var opt = {
        margin: [0, 8, 0, 0],
        pagebreak: { mode: 'avoid-all' }
     };
     
    // 导出完成后恢复原来的overflow
    html2pdf().from(div).set(opt).save('dashboard-pers-layout-1.pdf').then(() => {
        div.style.overflow = originalOverflow;
    });
});

方案二：使用html2pdf的钩子函数（更优雅） #

利用html2pdf提供的beforePrint和afterPrint钩子，在导出前后自动处理DOM：

$('#btn-one').click(function() {
    let div = document.querySelector(".tutto");
    const originalOverflow = div.style.overflow;
    
    var opt = {
        margin: [0, 8, 0, 0],
        pagebreak: { mode: 'avoid-all' },
        // 导出前的钩子：修改overflow
        beforePrint: () => {
            div.style.overflow = 'visible';
        },
        // 导出后的钩子：恢复overflow
        afterPrint: () => {
            div.style.overflow = originalOverflow;
        }
     };
     
    html2pdf().from(div).set(opt).save('dashboard-pers-layout-1.pdf');
});

额外注意事项 #

如果你的图表是动态渲染的（比如ECharts、Highcharts），要确保图表完全渲染完成再执行导出，否则可能还是会出现内容不全的情况。可以在图表的finished回调里触发导出，或者加个短暂的延迟（不推荐，但临时可用）。

内容的提问来源于stack exchange，提问作者Morex