问将PDF与PDF合并
EN

Stack Overflow用户

提问于 2021-01-04 18:15:16

回答 1查看 3.8K关注 0票数 3

我试图复制合并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");
}

javascript

pdf

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-04 19:04:12

我认为问题在这段代码中:我想您想写：“文件”而不是“文件”.

fetch方法需要url (path)才能从web上获取资源，但是您上传的文件在url1下不可用。您可以通过在browser.

的地址栏中键入进行尝试。

我认为变量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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65567732

复制

相似问题

问将PDF与PDF合并
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将PDF与PDF合并EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将PDF与PDF合并
EN