带有 autoTable addImage

如何解决带有 autoTable addImage

我目前正在使用 jspdf 和 AutoTable plugin 创建 pdf 文件。

我的计划是创建一个这样的表：

我将图像作为本地 url，我正在尝试使用新图像将它们添加到 pdf 并将它们作为 .src 添加到图像中。 当我直接用图像运行jspdf.addImage函数时，图像显示正确。

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

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

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

doc.autoTable({
        head: [{comments: 'Photos'}],body: body,styles: {
            lineColor: [0,0],linewidth: 0.4,},headStyles: {
            fillColor: [191,191,191],textColor: [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 中。

解决方法

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

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

我尝试了 Ihsan 提到的其他功能，但没有任何运气。 didDrawCell 用于在绘制单元格后插入图像。 willDrawCell 在桌子后面绘制图像。 didParseCell 会将图像插入页面的顶角而不是表格本身。

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

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

我跟踪行索引以了解在哪些行插入图像以及大小正确。