How to make a pdf of images

Question

I have a function that uses jsPDF to make a PDF from images.

This is the only thing that needs to be done (adding a list of images to the pdf)

This is my code:

const { allImgs } = useAppContext()
const doc = new jsPDF();

const generatePDF = () => {
   for (let i = 0; i < allImgs.length; i++) {
      doc.addImage(allImgs[i], 'PNG', 0, 0, 210, 297)
      doc.addPage()
   }
}

useEffect(() => {
   generatePDF();
}, [])

// ...
<button onClick={() => { doc.save('ex.pdf') }}> Download PDF</button>
//...

Each PDF page needs to have one and only one image form the list.

But for some reason, only the first image is getting copied to all PDF pages. The PDF generated contains the correct number of pages(+1) but all pages contain only the first image.

I have verified each item from allImgs is distinct.

How do I solve this? Is it a mistake of the library? Is there any other library that I can use?

Btw, I'm using NextJS (ReactJS)

Answer 1

For anyone reading or having similar issues with jsPDF, the logic I have is right and that is how you need to add images to a pdf. The for loop may also me implemented as,

   let len = allImgs.length;
   for (let i = 0; i < len; i++) {
      doc.addImage(allImgs[i], 'PNG', 0, 0, 210, 297)
      if(i !== len) doc.addPage()
   }

This ensures that an empty page isn't added at end of document.

The issue in my case was that the base64 string of images I was using to add to the pdf contained data like 'dataURL... base64, ...'. I just had to remove the first 22 characters. Like,

   const element = allPages[i].substring(22);
   doc.addImage(element, 'PNG', 0, 0, 210, 297)

and everything works fine. But I still don't understand how the first image got rendered (to all pages of the PDF too!!).

Thanks to @CHess's comment!