pdf-lib在前端合并pdfs

Question

我正在尝试使用javascript和pdf-lib库在前端合并两个pdf文件。我在github存储库中找到了这个片段pdf库：

async function mergePdfs(pdfsToMerge: string[]) {
const mergedPdf = await PDFDocument.create();
for (const pdfCopyDoc of pdfsToMerge) {
const pdfBytes = fs.readFileSync(pdfCopyDoc);
const pdf = await PDFDocument.load(pdfBytes);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach((page) => {
mergedPdf.addPage(page);
});
}
const mergedPdfFile = await mergedPdf.save();
return mergedPdfFile;
}

但正如我所看到的，这个片段是针对nodejs的(浏览器javascript中没有fs.readfilesync(。所以我有两个问题：

1. 我应该在pdfsToMerge(string: [])中放入什么？我有包含pdf1和pdf URL的变量
2. 另外，我有两个变量，其中包含这些pdf的base64代码。我如何使用这个片段，而不是像在nodejs中那样使用fs.readfilesync，而是在前端

非常感谢！

Answer 1

PDFDocument.load()方法将接受base64字符串作为参数，因此根本不需要转换这些字符串。

至于存储pdf文档url路径的变量，可以使用fetch而不是node的文件系统。如pdf-lib文档中所述，您可以存储ArrayBuffer并将其传递到PDFDocument.load()中，如下所示：

const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'
const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
const pdfDoc = await PDFDocument.load(arrayBuffer)

Answer 2

您的版本号应该是最新的pdf库

事件的顺序很重要。以下是我使用的函数，必须按事件顺序我使用的是带有数据或emtpy来获得填充或未填充的pdf文件

async  copyPages(sale: Sale, url1, urlArray, isWithData, isEmptyForm) {
this.pdfService.getIsEmpty().subscribe(data => { isEmptyForm = data; });
this.pdfService.getIsWithData().subscribe(data => { isWithData = data; });
console.log(urlArray);
let donorBytes = [];
let donorBytesFInal = [];
let donorPage = [];
let donorDoc = [];
/**
* first page get bytes from url
* then load data
* then convert the data bytes to pdfDocument 
* later in routine this firstDonorDoc pages are inserted not added
*/
let firstDonorPdfBytes = await fetch(url1).then(res => res.arrayBuffer());
await this.loadDataTodocument(firstDonorPdfBytes, sale, isWithData, 
isEmptyForm).then(data => {
firstDonorPdfBytes = data;
});
/**
* load first document
*/
const firstDonorPdfDoc = await PDFDocument.load(firstDonorPdfBytes);
/**
* load url array convert to bytes, send bytes to populate textfields with 
data
*/
for (let i = 0; i < urlArray.length; ++i) {
console.log(urlArray.length);
donorBytes[i] =  await fetch(urlArray[i].url).then(res => 
res.arrayBuffer());
}
/* Insert data to donorBytes and create DonorBytesFinal array with data */
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < donorBytes.length; ++i) {
await  this.loadDataTodocument(donorBytes[i], sale, isWithData, 
isEmptyForm).then(data 
=> {
donorBytesFInal.push(data);
});
}
//  console.log(donorBytesFInal);
/*
convert donor bytes to PdfDocument after bytes include data re 
donorBytesFInal
*/
for (let i = 0; i < donorBytesFInal.length; ++i) {
donorDoc[i] = await PDFDocument.load(donorBytesFInal[i]);
}
/* create out put document **/
const pdfDoc = await PDFDocument.create();
/**
* copay first page... not in array
*/
const [firstDonorPage] = await pdfDoc.copyPages(firstDonorPdfDoc, [0]);
/**
* copy all array pages of singular docuemnts output pdfdoc. Notices these 
are insertpages nto addpage
*/
for (let i = 0; i < donorBytes.length; ++i) {
[donorPage[i]] = await pdfDoc.copyPages(donorDoc[i], [0]);
pdfDoc.insertPage(0, donorPage[i]);
}
/** first page is an ADDpage not an insert */
pdfDoc.addPage(firstDonorPage);
/** create tyes for 64 and 8 and update globally */
const u8 = await pdfDoc.save();
const n64 = await pdfDoc.saveAsBase64();
this.pdfService.changeUint8ByteArray(u8);
this.pdfService.changeBase64Array(n64);
const pdfBytes = u8;
/** redundant empty urlarray */
urlArray = [];