vue中多个pdf合并

需要安装axios、vue-buffer、pdf-lib三个包

<template>
  <div id="app">
    <el-button @click="beginMerge">开始上传</el-button>
  </div>
</template>

<script>
import { PDFDocument } from "pdf-lib";
import axios from "axios";
import Buffer from 'vue-buffer'
// import _ from "lodash";
export default {
  components: {},
  methods: {
    beginMerge() {
    	// 这里替换成自己的pdf url就行
      this.mergePdf(
        [
          "https://test.pdf1",
          "https://test.pdf2",
        ],
        "测试名称.pdf"
      );
    },
    async mergePdf(urlList, fileName) {
      let startTime = +new Date()
      console.log(startTime)
      // eslint-disable-next-line
      let promises = [];
      urlList.map((url) => {
        // eslint-disable-next-line no-async-promise-executor
        let tmp = new Promise(async (resolve) => {
          const response = await axios({
            method: "get",
            url,
            responseType: "arraybuffer",
          });
          resolve(Buffer.from(response.data));
        });
        promises.push(tmp);
      });

      const pdfBuffers = await Promise.all(promises);

      const newPdf = await PDFDocument.create();
      for (let buffer of pdfBuffers) {
        const pdfDocument = await PDFDocument.load(buffer);
        const contentPages = await newPdf.copyPages(
          pdfDocument,
          pdfDocument.getPageIndices()
        );
        for (let page of contentPages) {
          newPdf.addPage(page);
        }
      }
      const uint8Array = await newPdf.save();
      let mergeBuffer = Buffer.from(uint8Array);

      const url = window.URL.createObjectURL(new Blob([mergeBuffer]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      console.log(+new Date() - startTime)
    },
  },
};
</script>
<style scope>
#app {
  text-align: center;
  margin: 0 auto;
}
</style>

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在Vue使用jsPDF合并PDF,你需要按照以下步骤进行操作: 1. 安装jsPDF库 运行以下命令来安装jsPDF库: ``` npm install jspdf --save ``` 2. 创建Vue组件 创建一个Vue组件来处理PDF合并。在该组件,你需要定义一个方法来合并PDF文件。在这个方法,你需要使用jsPDF库来将多个PDF文件合并成一个文件。 以下是一个示例Vue组件: ```html <template> <div> <input type="file" ref="fileInput" multiple @change="handleFileInput"> <button @click="mergePDF">合并PDF</button> </div> </template> <script> import jsPDF from 'jspdf'; export default { methods: { handleFileInput(event) { this.files = event.target.files; }, mergePDF() { const pdf = new jsPDF(); const files = this.files; const fileCount = files.length; let loadedCount = 0; const loadPDF = (index) => { const reader = new FileReader(); reader.onload = () => { pdf.addPage(reader.result); loadedCount++; if (loadedCount < fileCount) { loadPDF(loadedCount); } else { pdf.save('merged.pdf'); } }; reader.readAsDataURL(files[index]); }; loadPDF(0); } } } </script> ``` 在这个示例,我们定义了一个`handleFileInput`方法来处理用户上传的PDF文件。我们还定义了一个`mergePDF`方法来将多个PDF文件合并成一个文件。在这个方法,我们使用jsPDF库创建一个新的PDF对象。然后,我们遍历上传的文件,并将它们添加到新的PDF对象。最后,我们使用`pdf.save()`方法将合并后的PDF文件保存到本地。 请注意,我们使用`FileReader`对象来读取每个上传的文件。当一个文件读取完毕后,我们将其添加到新的PDF对象。当所有文件都添加完毕后,我们调用`pdf.save()`方法将合并后的PDF文件保存到本地。 3. 运行Vue应用程序 最后,你需要运行Vue应用程序来测试PDF合并功能。上传多个PDF文件并单击“合并PDF”按钮,然后查看文件系统是否生成了一个名为“merged.pdf”的新文件。 希望这个示例可以帮助你在Vue使用jsPDF合并PDF文件。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值