jsPDF - 包括其他 pdf [英] jsPDF - include other pdf
问题描述
我正在尝试用 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?
推荐答案
很遗憾，jsPDF 今天(2018)不支持.
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 不支持它.但是一些用户创建了关于添加(复制)的拉取请求来自同一 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>有用的链接:
这篇关于jsPDF - 包括其他 pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
