JSPDF with autoTable addImage

Question

I'm currently working on creating pdf files with jspdf and the AutoTable plugin.

My plan is to create a table like this: I have the images as local urls, and I'm trying to add them to the pdf using the new Image and adding them as .src to the image. When I directly run the jspdf.addImage function with the image, the images display correctly.

But I'm struggling to get the correct scaling to work. So I wanted to use the width and height properties from the image, but for this to work you need to wait for the image to load.

I tried to use the onload function, but it stops rendering the table in general, because it skips over the function and continues with the next table before the images load.

If you have any suggestions of how to get something like this to work it would be greatly appreciated. The images all have variable resolution and need to be scaled down to properly fit in the table. I'll paste my working code (but without the height and width scaling) below.

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,
                )
            }
        }

The commented out part of this code was my other attempt where I would add the image after it was loaded, but this made the image not appear at all in the pdf.

Answer 1

I have been able to solve most of my question using the following functions:

The scaling I was able to fix by storing the width and height together with my images. I then set my height to be fixed (in my case 80mm) and calculated the width like this: photo.height / photo.width * 80.

I tried the other functions Ihsan mentioned, but without any luck. The didDrawCell is used for inserting the images after the cell has been drawn. willDrawCell draws the image behind the table. didParseCell will insert the images in the top corner of the page instead of in the table itself.

I also initially used the didParseCell to increase the size of the cells to be the correct size for the images, but later on changed this to adding the style when creating the body of the table.

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

I kept track of the row index to know at what rows to insert the image and so that the sizing is correct.