如何修改jsPDF代码实现两个DIV分别导出为PDF的两个分页？

调整后可实现需求的代码 #

$('#print').click(function (e) { 
    e.preventDefault();
    // 存入两个需要生成PDF的DIV选择器
    const reportSelectors = ['.report', '#report-two'];
    // 两个DIV尺寸一致，直接复用原有尺寸计算逻辑
    let HTML_Width = $(".report").width();
    let HTML_Height = $(".report").height();
    let top_left_margin = 1;
    let PDF_Width = HTML_Width + (top_left_margin * 2);
    let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    let canvas_image_width = HTML_Width;
    let canvas_image_height = HTML_Height;
    // 单个报告内容超出页面时的分页数量计算
    let totalPDFPagesPerReport = Math.ceil(HTML_Height / PDF_Height) - 1;

    // 并行处理两个DIV的canvas转换，全部转换完成后再生成PDF
    Promise.all(
        reportSelectors.map(selector => html2canvas($(selector)[0]))
    ).then(function (canvases) {
        // 初始化PDF实例
        let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        
        // 依次把两个DIV的内容添加到PDF
        canvases.forEach((canvas, index) => {
            // 第二个DIV的内容先新增空白页再添加
            if (index !== 0) {
                pdf.addPage(PDF_Width, PDF_Height);
            }
            let imgData = canvas.toDataURL("image/jpeg", 1.0);
            // 添加当前DIV的第一页内容
            pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height, 'FAST');
            // 保留原有的单DIV内容分页逻辑，处理超长内容的分页
            for (let i = 1; i <= totalPDFPagesPerReport; i++) {
                pdf.addPage(PDF_Width, PDF_Height);
                pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
            }
        });

        pdf.save("Report.pdf");
        $(".html-content").hide();
    });
});

修改说明 #

• 用Promise.all处理两个DOM的异步转换逻辑，避免多层回调嵌套
• 保留原有分页逻辑，同时适配两个DIV的内容依次写入PDF，第二个内容写入前自动新增空白页
• 原有宽高、边距等参数完全复用，无需额外调整

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