vue3 页面<div>多个下载成一个pdf

在Vue3中，要将多个 `<div>` 元素组合成一个PDF文档并提供下载，你需要利用HTML5的一些特性（如Canvas或者Blob API），结合前端生成PDF的库，如html2canvas、jspdf-gtk、pdfmake等。这里是一个基本的流程：

1. **安装库**：首先，安装一个用于生成PDF的库，比如 `html2canvas` 和 `jsPDF` 或者 `pdfmake`：

   npm install html2canvas jspdf autotable

2. **组件设计**：
创建一个组件，比如 `ExportToPDF`，接收多个 `<div>` 的数组作为props：

   <template>
     <button @click="exportToPDF">导出为PDF</button>
     <div v-for="(content, index) in contents" :key="index">{{ content }}</div>
   </template>

   <script>
   import html2canvas from 'html2canvas';
   import jsPDF from 'jspdf';

   export default {
     props: {
       contents: Array,
     },
     methods: {
       exportToPDF() {
         this.createPDF();
       },
       async createPDF() {
         // 实现PDF生成逻辑
       },
     },
   };
   </script>

3. **生成PDF逻辑**：
在 `createPDF` 方法中，遍历每个 `<div>`，使用 `html2canvas` 将其转换为canvas，然后绘制到 `jspdf` 对象中：

   async createPDF() {
     let doc = new jsPDF('p', 'mm', 'a4');
     for (let content of this.contents) {
       let canvas = await html2canvas(content.$el); // 注意这里的$.el获取Vue实例的dom
       let imgData = canvas.toDataURL('image/jpeg');
       doc.addImage(imgData, 'JPEG', 10, 10, 180, 267); // 调整图像位置和大小
     }
     doc.save(`output_${Date.now()}.pdf`);
   },

4. **注意事项**：
- `html2canvas` 可能遇到跨域的问题，如果需要解决，需要服务端配合提供跨域头。
- 如果 `<div>` 中有大量数据，可能需要优化性能，例如只渲染部分可视区域。