前端使用pdf-lib库实现pdf合并，window.open预览合并后的pdf-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端使用pdf-lib库实现pdf合并，window.open预览合并后的pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近出差开了好多发票，写了一个pdf合并网站，用于把多张发票pdf合并成一张，方便打印

使用pdf-lib这个库实现的pdf合并功能，预览使用的是浏览器自身查看pdf功能
源码

网页地址 https://zqy233.github.io/PDF-merge/文章来源地址https://www.toymoban.com/news/detail-515080.html

<!DOCTYPE html>
<html>
  <head>
    <title>PDF合并</title>
    <script src="https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
  </head>
  <body>
    <input type="file" id="fileInput" multiple />
    <button onclick="previewMergePDF()">预览合并的PDF</button>
    <button onclick="downloadMergePDF()">下载合并的PDF</button>
    <script>
      async function previewMergePDF() {
        const fileInput = document.getElementById("fileInput");
        const files = fileInput.files;
        if (files.length < 2) {
          alert("请至少选择两个PDF文件进行合并！");
          return;
        }
        // 创建一个新的PDF文档
        const mergedPdf = await PDFLib.PDFDocument.create();
        // 遍历选择的每个文件
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();
          // 读取文件内容
          const fileContents = await new Promise((resolve, reject) => {
            reader.onload = function (event) {
              resolve(event.target.result);
            };
            reader.onerror = function (event) {
              reject(new Error("文件读取错误。"));
            };
            reader.readAsArrayBuffer(file);
          });
          // 将PDF文件添加到合并的PDF文档中
          const pdf = await PDFLib.PDFDocument.load(fileContents);
          const copiedPages = await mergedPdf.copyPages(
            pdf,
            pdf.getPageIndices()
          );
          copiedPages.forEach((page) => {
            mergedPdf.addPage(page);
          });
        }
        // 使用浏览器自带预览功能，预览合并后的PDF
        const mergedPdfBytes = await mergedPdf.save();
        const mergedPdfBlob = new Blob([mergedPdfBytes], {
          type: "application/pdf",
        });
        const fileURL = URL.createObjectURL(mergedPdfBlob);
        window.open(fileURL);
      }
      async function downloadMergePDF() {
        const fileInput = document.getElementById("fileInput");
        const files = fileInput.files;
        if (files.length < 2) {
          alert("请至少选择两个PDF文件进行合并！");
          return;
        }
        const mergedPdf = await PDFLib.PDFDocument.create();
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();
          const fileContents = await new Promise((resolve, reject) => {
            reader.onload = function (event) {
              resolve(event.target.result);
            };
            reader.onerror = function (event) {
              reject(new Error("文件读取错误。"));
            };
            reader.readAsArrayBuffer(file);
          });
          const pdf = await PDFLib.PDFDocument.load(fileContents);
          const copiedPages = await mergedPdf.copyPages(
            pdf,
            pdf.getPageIndices()
          );
          copiedPages.forEach((page) => {
            mergedPdf.addPage(page);
          });
        }
        const mergedPdfFile = await mergedPdf.saveAsBase64();
        const downloadLink = document.createElement("a");
        downloadLink.href = "data:application/pdf;base64," + mergedPdfFile;
        downloadLink.download = "merged.pdf";
        downloadLink.click();
      }
    </script>
  </body>
</html>