如何制作图像的pdf

Question

我有一个使用 jsPDF 从图像制作 PDF 的功能。

这是唯一需要做的事情（将图像列表添加到 pdf）

这是我的代码：

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>
//...

每个 PDF 页面需要一张且只有一张图像形成列表。

但由于某种原因，只有第一张图片被复制到所有 PDF 页面。生成的 PDF 包含正确的页数 (+1)，但所有页面仅包含第一张图片。

我已验证 allImgs 中的每个项目都是不同的。

我该如何解决这个问题？这是图书馆的错误吗？还有其他我可以使用的库吗？

顺便说一句，我正在使用 NextJS (ReactJS)

Answer 1

对于阅读 jsPDF 或遇到类似问题的任何人，我的逻辑是正确的，这就是您需要将图像添加到 pdf 的方式。 for 循环也可以实现为

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

这确保不会在文档末尾添加空白页。

我的问题是我用来添加到 pdf 的 base64 图像字符串包含 'dataURL... base64, ...' 等数据。我只需要删除前 22 个字符。喜欢，

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

一切正常。但我仍然不明白第一张图片是如何渲染的（也渲染到 PDF 的所有页面！！）。

感谢@CHess 的评论！

如何制作图像的pdf

How to make a pdf of images

javascript

pdf

jspdf

reactjs

next.js