个人中心
gpt4 book ai didi

javascript - 使用 PDF-LIB 合并 PDF

转载 作者：行者123 更新时间：2023-12-04 08:19:16 26 4
gpt4 key购买 nike

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

最佳答案

  1. 我认为问题出在这段代码中:我猜你想写:“文件[0]”而不是“文件[0]”。

  2. fetch 方法需要 url(路径)到资源来自网络，但您上传的文件不是在 url1 下可用。您可以通过在地址栏中输入 url1 来尝试在浏览器中。

  3. 我认为不需要变量 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>

关于javascript - 使用 PDF-LIB 合并 PDF，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65567732/

26 4 0
文章推荐： python - 如何在字符串变量中存储单个\？
文章推荐： grails - 显示IntelliJ中的所有警告
文章推荐： amazon-web-services - Dynamodb 查询操作
文章推荐： javascript - Buefy 分页更改事件问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com