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>

你可能感兴趣的:(随笔,vue.js,pdf,前端)