vue实现PDF导出
Vue 实现 PDF 导出方法
使用 jsPDF 库
jsPDF 是一个流行的 JavaScript 库，用于生成 PDF 文件。安装依赖：
npm install jspdf示例代码：
import jsPDF from 'jspdf';
export default {
methods: {
generatePDF() {
const doc = new jsPDF();
doc.text('Hello Vue!', 10, 10);
doc.save('vue-pdf.pdf');
}
}
}使用 html2canvas 和 jsPDF 结合
对于需要将 HTML 内容转为 PDF 的场景，可以结合 html2canvas 实现：
npm install html2canvas jspdf示例代码：
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
export default {
methods: {
async exportToPDF() {
const element = document.getElementById('pdf-content');
const canvas = await html2canvas(element);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('vue-html-pdf.pdf');
}
}
}使用 vue-html-to-paper 插件
这是一个 Vue 专用插件，简化了打印和 PDF 导出流程：
npm install vue-html-to-paper配置示例：
import VueHtmlToPaper from 'vue-html-to-paper';
Vue.use(VueHtmlToPaper, {
name: '_blank',
specs: ['fullscreen=yes', 'titlebar=yes']
});使用示例：
<button @click="print">Export PDF</button>
<div id="print-content">Content to export</div>
<script>
export default {
methods: {
print() {
this.$htmlToPaper('print-content');
}
}
}
</script>使用 PDFKit（Node.js 后端方案）
对于需要更复杂 PDF 生成的场景，可以结合后端服务：
npm install pdfkitNode.js 示例：
const PDFDocument = require('pdfkit');
const fs = require('fs');
const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Vue Generated PDF', 100, 100);
doc.end();前端通过 API 调用触发生成。
注意事项
- 中文字体支持需要额外配置字体文件
- 复杂布局建议使用 html2canvas 方案
- 大量数据导出考虑分页处理
- 移动端需测试兼容性
以上方法可根据具体需求选择，简单文本导出推荐 jsPDF，复杂 HTML 内容推荐 html2canvas 组合方案。
