vue页面前端导出pdf

可以使用 jsPDF 和 html2canvas 库来实现将当前页面导出为 PDF 文件。具体步骤如下： 1. 安装 jsPDF 和 html2canvas 库： ``` npm install jspdf html2canvas --save ``` 2. 在需要导出 PDF 的组件中引入 jsPDF 和 html2canvas： ```javascript import jsPDF from 'jspdf'; import html2canvas from 'html2canvas'; ``` 3. 编写导出 PDF 的方法： ```javascript exportPdf() { const dom = document.querySelector('#pdfDom'); // 需要导出为 PDF 的 DOM 元素 html2canvas(dom).then(canvas => { const contentWidth = canvas.width; const contentHeight = canvas.height; const pageHeight = contentWidth / 592.28 * 841.89; let leftHeight = contentHeight; let position = 0; const imgWidth = 595.28; const imgHeight = 592.28 / contentWidth * contentHeight; const pageData = canvas.toDataURL('image/jpeg', 1.0); const pdf = new jsPDF('', 'pt', 'a4'); if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; if (leftHeight > 0) { pdf.addPage(); } } } pdf.save('导出的文件名.pdf'); }); } ``` 4. 在需要导出 PDF 的按钮上绑定导出方法： ```html <button @click="exportPdf">导出 PDF</button> ```

### Vue3 前端页面导出 PDF 的实现方法 在 Vue3 项目中实现前端页面导出为 PDF 功能，主要依赖于 `html2canvas` 和 `jsPDF` 这两个库。以下是详细的实现方式： #### 使用 html2canvas 和 jsPDF 库 通过 `html2canvas` 将 HTML 页面渲染成 Canvas 图片，再利用 `jsPDF` 将图片插入到 PDF 文档中并保存。 安装所需依赖： ```bash npm install html2canvas jspdf --save ``` 创建工具函数文件（如 `utils/exportPdf.js`）： ```javascript import { jsPDF } from "jspdf"; import html2canvas from "html2canvas"; export function exportHtmlToPdf(elementId, filename = "document") { const element = document.getElementById(elementId); if (!element) throw new Error("Element not found"); html2canvas(element).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdfWidth = 210; // A4 width in mm const pdfHeight = (canvas.height * pdfWidth) / canvas.width; const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' }); doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); // 添加页码功能 let totalPages = Math.ceil(pdfHeight / 297); // 计算总页数 for (let i = 1; i <= totalPages; i++) { doc.setPage(i); doc.setFontSize(10); doc.setTextColor(150); doc.text(`第 ${i} 页`, 180, 285); // 设置页脚位置 } doc.save(`${filename}.pdf`); }); } ``` 调用此工具函数的方法如下： ```javascript <template> <div id="content"> <!-- 需要导出的内容 --> <h1>这是需要导出的页面</h1> <p>一些文字内容...</p> </div> <button @click="handleExport">导出 PDF</button> </template> <script> import { exportHtmlToPdf } from '@/utils/exportPdf'; export default { methods: { handleExport() { try { exportHtmlToPdf('content', 'example-document'); // 调用导出函数 } catch (error) { console.error(error.message); } } } }; </script> ``` 上述代码实现了将指定 DOM 元素导出为 PDF 文件的功能[^2]。同时支持自定义文件名以及简单的分页逻辑[^5]。 --- #### 后端返回二进制流的方式 如果后端提供了生成好的 PDF 数据，则可以直接将其下载至本地。具体实现如下： 接收后端响应的数据，并触发浏览器下载行为： ```javascript async function downloadPdfFromBackend(apiUrl) { try { const response = await fetch(apiUrl, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: localStorage.getItem('token') || '' } }); if (!response.ok) throw new Error('Failed to get the file'); const res = await response.arrayBuffer(); const blob = new Blob([new Uint8Array(res)], { type: 'application/pdf' }); // 创建 Blob 对象 const url = URL.createObjectURL(blob); // 创建临时链接地址 const a = document.createElement('a'); // 创建虚拟<a>标签 a.href = url; a.download = 'output.pdf'; // 下载后的文件名称 document.body.appendChild(a); a.click(); // 执行点击事件 URL.revokeObjectURL(url); // 清理内存中的对象URL document.body.removeChild(a); } catch (err) { console.error(err.message); } } // 在组件中调用 <button @click="downloadPdfFromBackend('/api/generate-pdf')">从后端获取并下载 PDF</button> ``` 这种方式适用于后端已经完成复杂业务处理的情况，例如动态生成报表等场景[^4]。 --- #### 自动分割页面与添加页码 对于复杂的多页布局需求，可以扩展分页逻辑。核心思路是对目标区域的高度进行测量，并按需拆分为多个子区域分别绘制到不同页面上。 示例代码片段展示如何手动切分高度较大的内容： ```javascript function splitAndAddPages(doc, contentCanvas, pageHeightLimit) { const totalHeight = contentCanvas.height; const pagesCount = Math.ceil(totalHeight / pageHeightLimit); for (let pageIndex = 0; pageIndex < pagesCount; pageIndex++) { const startOffsetY = pageIndex * pageHeightLimit; const endOffsetY = Math.min((pageIndex + 1) * pageHeightLimit, totalHeight); const croppedCanvas = document.createElement('canvas'); const ctx = croppedCanvas.getContext('2d'); croppedCanvas.width = contentCanvas.width; croppedCanvas.height = endOffsetY - startOffsetY; ctx.drawImage(contentCanvas, 0, startOffsetY, contentCanvas.width, endOffsetY - startOffsetY, 0, 0, contentCanvas.width, endOffsetY - startOffsetY); const imageData = croppedCanvas.toDataURL('image/png'); doc.addImage(imageData, 'PNG', 0, 0, 210, pageHeightLimit); if (pageIndex !== pagesCount - 1) { doc.addPage(); // 新增一页 } } } ``` 以上代码能够有效解决大尺寸页面无法一次性完全显示的问题[^1]。 ---