admin管理员组

文章数量:1307023

I am trying to replicate the official example for merging 2 pdf files, but instead of hardcode the name of the file, I'd like to have the user upload two files. The code works well when the filename is hardcoded (see url2) but doesn't work when trying to retrieve the filename from the input tag. What am I doing wrong?

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");
}

I am trying to replicate the official example for merging 2 pdf files, but instead of hardcode the name of the file, I'd like to have the user upload two files. The code works well when the filename is hardcoded (see url2) but doesn't work when trying to retrieve the filename from the input tag. What am I doing wrong?

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
Share Improve this question edited Jan 5, 2021 at 20:50 stm 6881 gold badge6 silver badges24 bronze badges asked Jan 4, 2021 at 18:15 Nicola IbbaNicola Ibba 771 gold badge2 silver badges9 bronze badges 1
  • Please elaborate on "doesn't work". – Scott Hunter Commented Jan 4, 2021 at 18:18
Add a ment  | 

1 Answer 1

Reset to default 7

  1. I think the problem is in this code: I guess you would like to write: "files[0]" instead of "file[0]".

  2. fetch method requires url (path) to resource from the web, but your uploaded file is not available under url1. You can try it by typing url1 in address bar in browser.

  3. I think that variable doc2 is not required. Probably you could write directly:

    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())

Working for me code:

<html>
<head>
   <script src="https://unpkg./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>

本文标签： javascriptMerge PDF with PDFLIBStack Overflow

版权声明：本文标题：javascript - Merge PDF with PDF-LIB - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741827847a2399752.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。