如何在AngularJS中用pdfMake拆分长图片并插入多页？

我完全懂你遇到的麻烦——一开始功能跑起来没啥问题，但数据量上去后，html2canvas生成的长图根本塞不进PDF的单页里，查了资料也没找到靠谱的解决办法。针对这个情况，我给你两个可行的方案：

方案一：将长图分割为多页PDF #

核心思路：根据PDF标准页面的高度，把canvas生成的长图切成多个适配单页的小图，再依次加入PDF内容中，彻底避免单页放不下的问题。

修改后的代码示例：

html2canvas(document.getElementById(id)).then(function (canvas) {
    // 设定PDF页面宽度（和你之前设置的图片宽度保持一致）
    const pdfWidth = 500;
    // 按A4纸宽高比换算页面高度（A4宽高比为210/297）
    const pdfPageHeight = pdfWidth * (297 / 210);
    // 计算图片按PDF宽度缩放后的实际高度
    const scaledImgHeight = canvas.height * (pdfWidth / canvas.width);
    // 计算需要分割的总页数
    const pageCount = Math.ceil(scaledImgHeight / pdfPageHeight);

    const docDefinition = {
        content: []
    };

    for (let i = 0; i < pageCount; i++) {
        // 创建临时canvas用于裁剪当前页的图片区域
        const tempCanvas = document.createElement('canvas');
        const tempCtx = tempCanvas.getContext('2d');
        // 临时canvas的尺寸对应原图缩放后的单页高度
        tempCanvas.width = canvas.width;
        tempCanvas.height = pdfPageHeight * (canvas.width / pdfWidth);

        // 从原图裁剪出当前页对应的区域
        tempCtx.drawImage(
            canvas,
            0,
            i * tempCanvas.height,
            canvas.width,
            tempCanvas.height,
            0,
            0,
            canvas.width,
            tempCanvas.height
        );

        // 将裁剪后的小图加入PDF内容数组
        docDefinition.content.push({
            image: tempCanvas.toDataURL(),
            width: pdfWidth
        });
    }

    pdfMake.createPdf(docDefinition).download(id + ".pdf");
    canvas.remove();
});

方案二：直接用pdfMake处理DOM内容（更推荐） #

其实pdfMake本身支持自动分页的结构化内容（比如文本、表格），如果你的需求允许，直接把DOM内容转换成pdfMake支持的格式，会比先转图片再处理高效得多，也从根源上避免了图片分页的问题。不过如果必须依赖html2canvas的截图效果，方案一就是最优解。

另外补充个小技巧：如果不想分割图片，也可以自定义PDF页面尺寸为纵向长页面，但这种方式会导致PDF阅读体验变差，不如分割成标准A4页面友好。

为啥会出现这个问题？
当图片高度超过PDF单页高度时，pdfMake默认会强制缩放图片来适配页面，这就是你看到内容被压缩、显示不全的原因。通过分割图片，我们能保证每一页都是标准尺寸，内容完整显示。

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