jsPDF - 包括其他 pdf

Question

我正在尝试使用 jsPDF 解决此类问题：

我有 PDF 文件，它存储在服务器上。 我正在用 jsPDF 生成另一个 pdf 并尝试将已经存在的 pdf 文件（如我上面提到的）作为另一个页面附加。

我用谷歌搜索了它，但找不到任何帮助。 我也在 stackoverflow 上发现了这个问题，但它是不同的场景 - Append Existing Pdf to Jspdf

我怎样才能使这个工作？ 或者有没有其他插件或其他东西可以做到这一点？

Answer 1

不幸的是，今天（2018 年）不支持 jsPDF。

替代方案

但是您可以使用免费的 PHP 库（如FPDI）编辑服务器端。 使用 FPDI 甚至可以编辑 PDF 文档、提取一些页面并将它们添加到新的 PDF 文档中。 怎么做请看这里。

您可以使用 AJAX 向您的服务器发送请求，服务器执行此操作并返回一个新的 PDF。

---

更新

我们在 2020 年 7 月，jsPDF 不支持它。 但是一些用户创建了关于从同一 PDF 文档的页面添加（复制）的拉取请求。 在此链接之前，您可以找到示例代码如何使用他的功能。 但它不能从另一个 PDF 的. 您可以在此处找到他函数中的代码。

使用 JavaScript PDF-lib 的替代解决方案

您可以使用 JavaScript“PDF-lib”来实现。 您可以在GitHub 页面上找到源代码和其他信息。 你可以在它的项目页面上找到这个库中的很多演示。

“PDF-lib”可以在任何 JavaScript 环境中创建和修改 PDF 文档。 它旨在在任何现代 JavaScript 运行时中工作。 在 Node.JS、浏览器、Deno 和 React Native 环境中测试。

API 文档可在项目站点上获得：
https://pdf-lib.js.org/docs/api/

示例“使用嵌入的 PDF 页面创建 PDF”

 const { PDFDocument } = PDFLib; async function embedPdfPages() { // Fetch American flag PDF const flagUrl = 'https://pdf-lib.js.org/assets/american_flag.pdf', // Fetch US constitution PDF constitutionUrl = 'https://pdf-lib.js.org/assets/us_constitution.pdf', flagPdfBytes = await fetch(flagUrl).then((res) => res.arrayBuffer()), constitutionPdfBytes = await fetch(constitutionUrl).then((res) => res.arrayBuffer()), // Create a new PDFDocument pdfDoc = await PDFDocument.create(); // Add a blank page to the document var page = pdfDoc.addPage(); // Embed the first page of the American flag PDF const [americanFlag] = await pdfDoc.embedPdf(flagPdfBytes), // Load the constitution PDF into a PDFDocument usConstitutionPdf = await PDFDocument.load(constitutionPdfBytes), // Embed the first page of the constitution firstPageOfConstitution = await pdfDoc.embedPage(usConstitutionPdf.getPages()[0]); // Draw the American flag page page.drawPage(americanFlag); //add a blank new page to the document page = pdfDoc.addPage(); // Draw the first page of the constitution page.drawPage(firstPageOfConstitution); // Serialize the PDFDocument to bytes (a Uint8Array) const pdfBytes = await pdfDoc.save(); // Trigger the browser to download the PDF document download(pdfBytes, "pdf-lib_pdf_page_embedding_example.pdf", "application/pdf"); }

 body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } p { font-family: helvetica; font-size: 24px; text-align: center; margin: 25px; } .small { font-family: helvetica; font-size: 18px; text-align: center; margin: 25px; } button { background-color: #008CBA; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; }

 <script src="https://unpkg.com/pdf-lib@1.4.0"></script> <script src="https://unpkg.com/downloadjs@1.4.7"></script> <p>Click the button to embed PDF pages with <code>pdf-lib</code></p> <button onclick="embedPdfPages()">Create PDF</button> <p class="small">(Your browser will download the resulting file)</p>

---

示例“使用 JPEG 和其他 PDF 作为附件创建 PDF”

 const { PDFDocument, rgb } = PDFLib async function addAttachments() { // Define attachment URLs const jpgUrl = 'https://pdf-lib.js.org/assets/cat_riding_unicorn.jpg', pdfUrl = 'https://pdf-lib.js.org/assets/us_constitution.pdf', // Fetch attachments jpgAttachmentBytes = await fetch(jpgUrl).then(res => res.arrayBuffer()), pdfAttachmentBytes = await fetch(pdfUrl).then(res => res.arrayBuffer()), pdfDoc = await PDFDocument.create(); // Add the JPG attachment await pdfDoc.attach(jpgAttachmentBytes, 'cat_riding_unicorn.jpg', { mimeType: 'image/jpeg', description: 'Cool cat riding a unicorn!', creationDate: new Date('2019/12/01'), modificationDate: new Date('2020/04/19') }); // Add the PDF attachment await pdfDoc.attach(pdfAttachmentBytes, 'us_constitution.pdf', { mimeType: 'application/pdf', description: 'Constitution of the United States', creationDate: new Date('1787/09/17'), modificationDate: new Date('1992/05/07') }); // Add a page with some text const page = pdfDoc.addPage(); page.drawText('This PDF has two attachments. Note that only some appropriated PDF readers can view attachments. For example the Adobe Reader.', {x: 135, y: 415}); // Serialize the PDFDocument to bytes (a Uint8Array) const pdfBytes = await pdfDoc.save(); // Trigger the browser to download the PDF document download(pdfBytes, "pdf-lib_add_attachments.pdf", "application/pdf"); }

 body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } p { font-family: helvetica; font-size: 24px; text-align: center; margin: 25px; } .small { font-family: helvetica; font-size: 18px; text-align: center; margin: 25px; } button { background-color: #008CBA; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; } blockquote { background-color: rgba(255,229,100,.3); border-left: 8px solid #ffe564; padding: 15px 30px 15px 15px; }

 <script src="https://unpkg.com/pdf-lib@1.7.0"></script> <script src="https://unpkg.com/downloadjs@1.4.7"></script> <br><br><br> <p>Click the button below to create a document and attach a JPEG image and PDF file with <code>pdf-lib</code></p> <blockquote>Note that only some PDF readers can view attachments. This includes Adobe Reader, Foxit Reader, and Firefox.</blockquote> <button onclick="addAttachments()">Create PDF</button> <p class="small">(Your browser will download the resulting file)</p>

有用的链接：

• 如何在 Adob​​e Reader 中打开和管理附件

Answer 2

jsPDF 不能这样做，但pdf-lib可以。 您可以将两者结合使用，也可以单独使用pdf-lib 。 要在pdf-lib加载现有的 pdf，只需执行以下操作：

async function loadPdf(){
  const response = await fetch('existing.pdf');
  const buffer = await response.arrayBuffer();
  const existingPdfDocBytes = new Uint8Array(buffer);
  const pdfDoc = PDFLib.PDFDocumentFactory.load(existingPdfDocBytes);
  return pdfDoc;
}