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 U.S. 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 中打开和管理附件