在vue中使用jsPDF组件和html2canvas组件将生成的多个pdf合并为一个pdf

首先，你需要将每个生成的pdf保存为单独的文件，然后使用pdf-lib库将它们合并为一个pdf文件。下面是一个基本的实现步骤：

1. 安装pdf-lib库

npm install pdf-lib

2. 创建一个用于保存pdf文件的数组

let pdfs = [];

3. 使用jsPDF和html2canvas组件生成pdf文件，并将其添加到pdfs数组中

// 引入jsPDF和html2canvas组件
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

// 生成pdf文件
html2canvas(document.querySelector('#pdf-content')).then(canvas => {
  let pdf = new jsPDF('p', 'mm', 'a4');
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
  pdfs.push(pdf);
});

4. 使用pdf-lib库将pdfs数组中的所有pdf文件合并为一个pdf文件

import { PDFDocument, StandardFonts } from 'pdf-lib';

// 将所有pdf文件合并为一个pdf文件
const mergedPdf = await PDFDocument.create();
const helveticaFont = await mergedPdf.embedFont(StandardFonts.Helvetica);

for (let pdf of pdfs) {
  const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
  copiedPages.forEach((page) => {
    mergedPdf.addPage(page);
  });
}

mergedPdf.setTitle('Merged PDF');
mergedPdf.setAuthor('Your Name');
mergedPdf.setCreator('Your Organization');

const pdfBytes = await mergedPdf.save();

5. 下载合并后的pdf文件

const blob = new Blob([pdfBytes], {type: 'application/pdf'});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'merged.pdf';
link.click();