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;
}