带有 autoTable addImage 的 JSPDF

Question

我目前正在使用 jspdf 和 AutoTable plugin.

创建 pdf 文件

我的计划是创建一个像这样的 table：我将图像作为本地 url，我正在尝试使用新图像将它们添加到 pdf，并将它们作为 .src 添加到图像。当我直接用图像运行 jspdf.addImage 函数时，图像显示正确。

但我正在努力让正确的缩放比例起作用。所以我想使用图像的宽度和高度属性，但要使其工作，您需要等待图像加载。

我尝试使用 onload 函数，但它通常停止渲染 table，因为它跳过该函数并在图像加载之前继续下一个 table。

如果您对如何让这样的东西起作用有任何建议，我们将不胜感激。所有图像都具有可变分辨率，需要按比例缩小以适合 table。我将在下面粘贴我的工作代码（但没有高度和宽度缩放）。

doc.autoTable({
        head: [{comments: 'Photos'}],
        body: body,
        styles: {
            lineColor: [0, 0, 0],
            lineWidth: 0.4,
        },
        headStyles: {
            fillColor: [191, 191, 191],
            textColor: [0, 0, 0],
        },
        didDrawCell: function (data) {
            if (data.section === 'body') {
                console.log(data);
                const image = new Image();
                // image.onload = function() {
                //     console.log(this);
                //     const width = this.width;
                //     const height = this.height;
                //     console.log({width, height})
                //     doc.addImage(
                //         this,
                //         'JPEG',
                //         data.cell.x + 5,
                //         data.cell.y + 2,
                //     )
                // }
                image.src = QuestionPhotos.link(photosObject[data.cell.raw])
                doc.addImage(
                    image,
                    'JPEG',
                    data.cell.x + 5,
                    data.cell.y + 2,
                )
            }
        }

这段代码中被注释掉的部分是我的另一次尝试，我会在加载图像后添加图像，但这使得图像根本不会出现在 pdf 中。

Answer 1

我已经能够使用以下功能解决我的大部分问题：

我可以通过将宽度和高度与图像一起存储来修复缩放比例。然后我将我的高度设置为固定的（在我的例子中是 80 毫米）并像这样计算宽度：photo.height / photo.width * 80.

我尝试了 Ihsan 提到的其他功能，但没有成功。 didDrawCell 用于在绘制单元格后插入图像。 willDrawCell 在 table 后面绘制图像。 didParseCell 会将图像插入页面的上角，而不是 table 本身。

我最初也使用 didParseCell 来增加单元格的大小，使其成为图像的正确大小，但后来将其更改为在创建 table 的正文时添加样式。

body.push([{content:'', styles: {minCellHeight: height + 10}}]);

我一直跟踪行索引以了解要在哪些行插入图像并确保大小正确。

带有 autoTable addImage 的 JSPDF

JSPDF with autoTable addImage

image

pdf

jspdf

jspdf-autotable