jsPDF-AutoTable layering and z-index

Question

I've implemented a PDF export of a table that has images in the first column. I use the createdCell callback to determine the (x,y) coordinates of the cell and then use doc.addImage() to render the image at the appropriate place.

The problem I have is that the images are actually behind the rendered table if I render them to the correct coordinates. If I shift the x-coordinate left I can see the images are rendered to the doc.

Does anyone know if there is a way to specify the layer index of objects rendered to the PDF, similar to how z-index property works in CSS?

Or is it possible to change the rendering order so that images are rendered on top?

Answer 1

FYI I was wrong to attempt this using callback, this is possible with addPageContent option.

Answer 2

I did not find any information about depth configuration ("z-index").

However, I know that whenever you add something to the page it is in front of all the items already inserted. As if it were an "incremental z-index".

So answering the question: "how to position one element on top of another" we have three solutions:

1. Just change the order of which element will be inserted on the page.
2. Create a loop adding all the necessary information (in this case, the table) and in another loop just create the images.
3. Invert the loop, for example with [a, b, c] = [c, b, a]. So the elements started to be created from the bottom up on the page (if your problem is a conflict between the loops). This case is more boring, more confusing and more difficult, but it may be the solution.