jsPDF - 包含其他 pdf

2022-01-22 00:00:00 merge append pdf javascript jspdf

我正在尝试用 jsPDF 解决这样的问题:

I'm trying to solve such problem with jsPDF:

我有存储在服务器上的 PDF 文件.我正在使用 jsPDF 生成另一个 pdf 并尝试将已存在的 pdf 文件(如上所述)作为另一个页面附加到.

I have PDF file, which is stored on server. I'm generating another pdf with jsPDF and trying to append to already existed pdf file (as I mentioned above) as a another page.

我用谷歌搜索了它，但找不到任何帮助.我也在stackoverflow上发现了这个问题，但情况不同-将现有的 Pdf 添加到 Jspdf

I googled about it, but can't find any help. Also I found this question on stackoverflow, but it is different scenario - Append Existing Pdf to Jspdf

我怎样才能使它工作?或者是否有其他插件或其他东西可以做到这一点?

How can I make this to work? Or is any other plugin or something else to make this?

推荐答案

很遗憾，今天(2018)不支持 jsPDF.

Unforfortunately, with jsPDF today (2018) it is not supported.

替代解决方案

但您可以使用免费的 PHP 库编辑服务器端，例如 FPDI.使用 FPDI 甚至可以编辑 PDF 文档、提取一些页面并将它们添加到新的 PDF 文档中.操作方法请参见 这里.

But you could edit server side with free PHP library like FPDI. With FPDI it is even possible to edit PDF documents, extract some pages and to add them to new PDF documents. How to do it see here.

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

You could send to your server a request using AJAX and the server do it and gives you a new PDF back.

更新

我们在 2020 年 7 月，jsPDF 不支持它.但是一些用户创建了关于添加(复制)的pull request来自同一 PDF 文档的页面.在此链接之前，您可以找到如何使用他的功能的示例代码.但是它不能从另一个 PDF 中添加页面.您可以在这里.

We are in July 2020 and it is not supported with jsPDF. But some user created pull request about adding (copying) from pages from the same PDF document. On this link before you can find the sample code how to use his function. But it can not add pages from another PDF's. The code from his function you can find here.

您可以使用 JavaScriptPDF-lib"来完成.您可以在 GitHub 页面上找到源代码和其他信息.您可以在它的 项目页面.

You can do it with JavaScript "PDF-lib". The source code and other info you can find on GitHub page. A lot of demos from this library you can find on it's project page.

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

"PDF-lib" can create and modify PDF documents in any JavaScript environment. It is designed to work in any modern JavaScript runtime. Tested in Node.JS, Browser, Deno, and React Native environments.

项目网站上提供了 API 文档:
https://pdf-lib.js.org/docs/api/

API documentation is available on the project site at:
https://pdf-lib.js.org/docs/api/

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>

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

相关文章