使用pdfMake与html2canvas导出大HTML表格时多页空白问题求助

你遇到的这个问题很典型——当用html2canvas把500行的超大表格转成单张图片后，pdfMake处理这种超长图片时容易出现渲染截断的情况，尤其是当图片高度远超单页PDF的尺寸时，后面的内容就无法正常显示了。下面给你几个可行的解决方案，按推荐程度排序：

方案一：直接用pdfMake原生生成表格（最优选择） #

放弃先转图片的思路，直接把HTML表格的数据提取出来，用pdfMake的原生表格语法生成PDF。这样不仅能完美支持分页，生成的PDF文字还可以选中，文件体积也更小，是处理大表格的首选方案。

实现代码： #

jQuery("body").on("click", "#btnExportCat", function () {
    const table = jQuery("#catalog_table")[0];
    // 提取表头文本
    const headers = Array.from(table.querySelectorAll("thead th")).map(th => th.textContent.trim());
    // 提取表格每行的单元格数据
    const rows = Array.from(table.querySelectorAll("tbody tr")).map(tr => {
        return Array.from(tr.querySelectorAll("td")).map(td => td.textContent.trim());
    });

    const docDefinition = {
        pageSize: "A4",
        content: [
            { 
                image: "data:image/png;base64,....logo_image_base64_encrypted_code....", 
                width: 80, 
                alignment: "center",
                margin: [0, 0, 0, 20] // 给下方表格留间距
            },
            {
                table: {
                    headerRows: 1, // 标记第一行为表头
                    widths: "auto", // 自动分配列宽，也可指定具体数值如[100, 200, 150]
                    body: [headers, ...rows] // 拼接表头和行数据
                },
                layout: "lightHorizontalLines" // 可选：添加表格横线样式
            }
        ]
    };

    pdfMake.createPdf(docDefinition).download("catalogue.pdf");
});

方案二：修复html2canvas+pdfMake的长图片渲染问题 #

如果你因为某些原因必须用图片转PDF的方式，可以尝试以下调整：

1. 确保html2canvas完整渲染整个表格 #

大表格可能因为视口限制，html2canvas默认只渲染可见部分，添加以下参数强制完整渲染：

html2canvas(jQuery("#catalog_table")[0], {
    scrollX: 0,
    scrollY: 0,
    useCORS: true,
    allowTaint: true,
    logging: true, // 开启日志，方便排查渲染错误
    onrendered: function (canvas) {
        // 后续PDF生成代码不变
    }
});

2. 让pdfMake正确处理长图片 #

在pdfMake配置中给图片添加fit属性，让它适应页面宽度并自动分页：

var docDefinition = {
    pageSize: "A4",
    content: [
        { 
            image: "data:image/png;base64,....logo_image_base64_encrypted_code....", 
            width: 80, 
            alignment: "center"
        },
        {
            image: data,
            fit: [500, null], // 固定宽度500，高度自适应，自动分页
            alignment: "center"
        }
    ]
};

3. 拆分表格分批渲染（极端情况） #

如果表格实在太长，超出了html2canvas的渲染上限，可以把表格拆分成多个小部分，分别转成图片后再合并到PDF中：

jQuery("body").on("click", "#btnExportCat", async function () {
    const table = jQuery("#catalog_table")[0];
    const rows = table.querySelectorAll("tbody tr");
    const chunkSize = 100; // 每100行拆成一个块
    const content = [];

    // 先添加Logo
    content.push({
        image: "data:image/png;base64,....logo_image_base64_encrypted_code....", 
        width: 80, 
        alignment: "center"
    });

    // 分批渲染表格块
    for (let i = 0; i < rows.length; i += chunkSize) {
        // 创建临时表格容器
        const tempTable = document.createElement("table");
        tempTable.innerHTML = table.querySelector("thead").outerHTML + 
                              "<tbody>" + 
                              Array.from(rows).slice(i, i + chunkSize).map(tr => tr.outerHTML).join("") + 
                              "</tbody>";
        document.body.appendChild(tempTable);
        
        // 渲染临时表格为图片
        const canvas = await html2canvas(tempTable);
        content.push({
            image: canvas.toDataURL(),
            width: 500,
            alignment: "center",
            margin: [0, 10, 0, 10] // 块之间留间距
        });
        
        // 删除临时表格
        document.body.removeChild(tempTable);
    }

    // 生成并下载PDF
    const docDefinition = { pageSize: "A4", content };
    pdfMake.createPdf(docDefinition).download("catalogue.pdf");
});

方案三：检查CSS和渲染环境 #

有时候表格的CSS样式会干扰html2canvas的渲染，建议：

• 临时移除表格或父元素的position: fixed、overflow: hidden等样式
• 确保表格没有被其他页面元素遮挡
• 优先在Chrome浏览器中测试（html2canvas在Chrome中的兼容性最好）

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