uniapp 页面生成pdf

### 实现 UniApp 页面到 PDF 的转换 在 UniApp 中将页面导出为 PDF 文件可以通过 HTML 转 Canvas，再通过 Canvas 导出为图片或者直接生成 PDF 来完成。以下是具体方法： #### 方法一：使用 `html2canvas` 和 `jsPDF` 此方法依赖于两个库：`html2canvas` 和 `jsPDF`。 1. **安装所需插件** 需要先引入这两个库，在项目中可以使用 npm 安装： ```bash npm install html2canvas jspdf ``` 2. **HTML 结构** 使用已有的 `my-login` 组件结构作为目标内容[^1]。 3. **JavaScript 逻辑** 下面是一个完整的 JavaScript 示例来实现页面转 PDF 功能： ```javascript import html2canvas from 'html2canvas'; import { jsPDF } from 'jspdf'; export default { methods: { async exportToPdf() { const element = document.querySelector('.login-container'); // 获取需要导出的 DOM 元素 try { const canvas = await html2canvas(element); // 将 DOM 渲染成 Canvas 图片 const imgData = canvas.toDataURL('image/png'); // 将 Canvas 转换成 Base64 编码的数据 URL const pdf = new jsPDF(); // 创建一个新的 PDF 文档对象 const imgProps = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); // 添加图像到 PDF pdf.save('exported.pdf'); // 保存 PDF 文件 } catch (error) { console.error('Error exporting to PDF:', error); } } } }; ``` 4. **调用函数** 可以绑定一个按钮事件触发该功能： ```html <button @click="exportToPdf">导出为 PDF</button> ``` --- #### 方法二：使用原生 API 或第三方插件 如果不想依赖外部库，也可以尝试一些专门用于 UniApp 平台的插件或工具包。例如，`uni-pdf-writer` 是一款支持跨平台的 PDF 工具，可以直接操作 PDF 数据流并写入文件。 1. **安装插件** 在 HBuilderX 中搜索并安装 `uni-pdf-writer` 插件。 2. **编写代码** 利用插件提供的接口创建自定义 PDF 内容： ```javascript import uniPdfWriter from 'uni-pdf-writer'; export default { methods: { createPdf() { const writer = new uniPdfWriter.Writer(); writer.setFontSize(18).text('登录后尽享更多权益', 50, 50); const buffer = writer.outputBufferSync(); const filePath = `${plus.io.filesystem.applicationDirectory}example.pdf`; plus.io.filesystem.writeTextFile(filePath, buffer.toString(), () => { console.log('PDF created successfully'); }); } } }; ``` --- ### 注意事项 - 如果页面内容较多，则可能需要分页处理，这通常涉及调整 `jsPDF` 的尺寸参数以及手动计算每一页的内容布局。 - 对于复杂的样式（如渐变背景），可能会因为 `html2canvas` 的局限性而无法完全还原效果。 - 移动端浏览器环境可能存在兼容性问题，建议测试多种设备上的表现。 ---