使用jsPDF渲染多个div内容为空的问题求助

核心问题 #

doc.html()是异步操作，你的代码是同步循环调用该方法后立即执行doc.save()，此时所有HTML内容还没完成渲染，所以生成的PDF为空。此外还有几个细节问题：

• 用var声明循环变量会导致闭包问题，异步回调中拿到的i始终是循环结束后的值
• 回调中的resolve()没有上下文（代码未包裹在Promise中），属于无效代码
• 循环最后一次迭代仍执行addPage()，会导致PDF末尾多一页空白

修正后的代码 #

const { jsPDF } = window.jspdf;

async function generatePDF() {
    const doc = new jsPDF('p', 'px', 'a4');
    const resultsDivs = document.getElementsByClassName('resultclasses');

    // 注意：若div的id是从resultid0开始，这里i要改为从0开始
    for (let i = 1; i < resultsDivs.length; i++) {
        const targetDiv = document.getElementById(`resultid${i}`);
        if (!targetDiv) continue; // 跳过不存在的元素

        // 等待当前div渲染完成再继续
        await new Promise(resolve => {
            doc.html(targetDiv, {
                callback: resolve,
                margin: [10, 10, 10, 10]
            });
        });

        // 最后一页无需新增页面
        if (i < resultsDivs.length - 1) {
            doc.addPage();
        }
    }

    doc.save('test.pdf');
}

// 执行生成
generatePDF();

额外检查项 #

1. 确保目标div是可见状态：如果元素设置了display: none，jsPDF无法渲染其内容
2. 确认依赖完整性：jsPDF的html功能依赖html2canvas，确保已正确引入相关依赖
3. 检查元素id匹配：确认resultid+i与实际DOM元素的id完全一致

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