我正在尝试复制合并 2 个 pdf 文件的官方示例，但我想让用户上传两个文件，而不是硬编码文件名。当文件名被硬编码时（参见 url2），该代码可以很好地工作，但是当尝试从输入标记检索文件名时，该代码不起作用。我究竟做错了什么？
async function copyPages() {
// Fetch first existing PDF document
const url1 = document.getElementById('file1').file[0].name
//const url1 = 'Patient_Card.pdf'
const doc1 = await fetch(url1).then(res => res.arrayBuffer())
// Fetch second existing PDF document
const url2 = 'Patient_Card.pdf'
const doc2 = await fetch(url2).then(res => res.arrayBuffer())
// Load a PDFDocument from each of the existing PDFs
const pdf1 = await PDFDocument.load(doc1)
const pdf2 = await PDFDocument.load(doc2)
// Create a new PDFDocument
const mergedPdf = await PDFDocument.create();
const copiedPagesA = await mergedPdf.copyPages(pdf1, pdf1.getPageIndices());
copiedPagesA.forEach((page) => mergedPdf.addPage(page));
const copiedPagesB = await mergedPdf.copyPages(pdf2, pdf2.getPageIndices());
copiedPagesB.forEach((page) => mergedPdf.addPage(page));
const mergedPdfFile = await mergedPdf.save();
// Trigger the browser to download the PDF document
download(mergedPdfFile, "pdf-lib_page_copying_example.pdf", "application/pdf");
}
我认为问题出在这段代码中：我猜你想写：“files[0]”而不是“file[0]”。
fetch 方法需要从网络获取资源的 url（路径），但您上传的文件在 url1 下不可用。您可以通过在浏览器地址栏中输入 url1 来尝试。
我认为变量 doc2 不是必需的。也许你可以直接写：
const pdf2 = await PDFDocument.load('Patient_Card.pdf')
const url1 = document.getElementById('file1').file[0].name
const doc1 = await fetch(url1).then(res => res.arrayBuffer())为我工作代码：
<html>
<head>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.js"></script>
<script>
function readFileAsync(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsArrayBuffer(file);
})
}
function download(file, filename, type) {
const link = document.getElementById('link');
link.download = filename;
let binaryData = [];
binaryData.push(file);
link.href = URL.createObjectURL(new Blob(binaryData, {type: type}))
}
async function merge() {
let PDFDocument = PDFLib.PDFDocument;
const in1 = document.getElementById('file1').files[0];
const in2 = document.getElementById('file2').files[0];
let bytes1 = await readFileAsync(in1);
let bytes2 = await readFileAsync(in2);
const pdf1 = await PDFDocument.load(bytes1);
const pdf2 = await PDFDocument.load(bytes2);
const mergedPdf = await PDFDocument.create();
const copiedPagesA = await mergedPdf.copyPages(pdf1, pdf1.getPageIndices());
copiedPagesA.forEach((page) => mergedPdf.addPage(page));
const copiedPagesB = await mergedPdf.copyPages(pdf2, pdf2.getPageIndices());
copiedPagesB.forEach((page) => mergedPdf.addPage(page));
const mergedPdfFile = await mergedPdf.save();
download(mergedPdfFile, 'pdf-lib_page_copying_example.pdf', 'application/pdf')
}
</script>
</head>
<body>
<input type="file" id="file1"> <br>
<input type="file" id="file2"> <br>
<button onclick="merge()">Merge</button> <br>
<a id="link">Download</a>
</body>
</html>