使用jsPDF导出PDF时图片跨页被截断的问题求助

针对你遇到的图片跨页截断问题，可通过以下几种方式修复：

1. 更换分页策略 #

原代码中autoPaging: 'text'是基于文本块进行分页判断，对图片这类块级元素的处理不够友好。将其改为autoPaging: 'slice'，jsPDF会尝试在内容的自然分割点进行分页，减少元素被截断的概率：

pdf.html(document.getElementById('toRender'), {
    // 其他配置不变
    autoPaging: 'slice',
    // ...
});

2. 优化html2canvas配置 #

添加跨域处理、匹配页面宽度等配置，确保内容渲染和分页计算更准确：

html2canvas: {
    scale: scale,
    useCORS: true, // 处理跨域加载的图片
    windowWidth: pWidth - margin * 2, // 让html2canvas按照PDF页面可用宽度渲染
    logging: false
}

3. 统一边距配置 #

原代码中同时设置了x/y偏移和margin参数，可能导致计算混乱，建议统一使用margin配置边距：

pdf.html(document.getElementById('toRender'), {
    // 移除x、y参数
    autoPaging: 'slice',
    margin: [20, 20, 20, 20], // 上、右、下、左边距统一为20pt
    // ...
});

4. 给容器添加分页避免样式 #

给目标渲染容器#toRender添加CSS样式，提示渲染引擎尽量避免在元素内部分页：

#toRender {
    page-break-inside: avoid;
}

修改后的完整代码示例 #

const exportToPdf = () => {
    ref.current.style.display = 'block';
    const pdf = new JSpdf('p', 'pt', 'a4', true);
    const pWidth = pdf.internal.pageSize.width;
    const srcWidth = document.getElementById('toRender').scrollWidth;
    const margin = 20;
    const scale = (pWidth - margin * 2) / srcWidth;

    pdf.html(document.getElementById('toRender'), {
        autoPaging: 'slice',
        margin: [margin, margin, margin, margin],
        html2canvas: {
            scale: scale,
            useCORS: true,
            windowWidth: pWidth - margin * 2,
            logging: false
        },
        callback: function () {
            pdf.save("Demo.pdf");
            ref.current.style.display = 'none';
        }
    });
}

如果上述自动分页方案仍有问题，可以尝试手动分页：先计算容器总高度和单页可用高度，将内容拆分为多个子容器，逐页添加到PDF中。

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