vue2 页面导出pdf，页面含图片

Vue 2 中将包含图片的网页导出为PDF，通常需要借助第三方库，如 jsPDF、html2canvas 或 pdfmake等。这里简单介绍一下过程：

1. 引入库：首先安装必要的库，例如 `vue-pdf` 或者 `html2canvas` 和 `jspdf-autotable`（如果页面有表格）。你可以使用 npm 安装：

   npm install html2canvas jspdf autotable --save-dev

2. 创建 PDF 功能组件：创建一个 Vue 组件，利用 jsPDF或html2canvas 将 HTML 渲染成 canvas，然后转换为 PDF。
- 对于 `html2canvas` + `jspdf` 的组合：

     import html2canvas from 'html2canvas';
     import jsPDF from 'jspdf';

     export default {
       methods: {
         exportToPdf() {
           html2canvas(document.getElementById('your-pdf-container')).then((canvas) => {
             let imgData = canvas.toDataURL('image/png');
             let doc = new jsPDF();
             doc.addImage(imgData, 'PNG', 0, 0);
             doc.save('example.pdf');
           });
         },
       }
     }

- 对于 `vue-pdf` 库：

     import { createPDF } from 'vue-pdf';

     export default {
       mounted() {
         this.createPDF().then(pdfBlob => {
           // 使用blob下载或直接显示
           saveAs(pdfBlob, 'example.pdf');
         });
       },
       methods: {
         createPDF() {
           return createPDF({
             el: '#your-pdf-container',
             format: 'A4',
             orientation: 'portrait'
           });
         },
       }
     }

3. 在模板中引用导出按钮和需要导出的内容：

   <template>
     <button @click="exportToPdf">导出为PDF</button>
     <div id="your-pdf-container">
       <!-- 你的页面内容，包括图片 -->
       <img src="your-image-url.jpg" />
       <!-- 可能还有其他元素 -->
     </div>
   </template>