在 Vue 项目中，纯前端实现导出 PDF 文件是完全可行的。通常可以借助一些 JavaScript 库来将 HTML 内容或 DOM 元素转换为 PDF 并下载，无需后端参与。
下面介绍几种常用的方案和实现方法：
推荐方案：使用 html2canvas + jsPDF
安装依赖（npm）
npm install html2canvas jspdf --save
示例代码（Vue 3 + Composition API）
<template>
<div>
<div id="pdf-content">
<h1>这是要导出的内容</h1>
<p>你可以放任意 HTML 内容，比如表格、图片等。</p>
</div>
<button @click="exportToPDF">导出 PDF</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const exportToPDF = () => {
const input = document.getElementById('pdf-content');
html2canvas(input).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4'); // A4纸张竖向
const pdfWidth = 210; // A4宽度 mm
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('导出内容.pdf');
});
};
</script>
可选增强功能
支持高清导出（缩放处理）
有时截图模糊，可适当放大 canvas 缩放比例：
html2canvas(input, { scale: 2 }).then(canvas => { ... })
多页支持（长页面自动分页）
如果你的 HTML 内容超过一页高度，建议使用插件如 html2pdf.js，它对多页支持更好：
安装：
npm install html2pdf.js --save
使用示例：
import html2pdf from 'html2pdf.js';
const exportToPDF = () => {
const element = document.getElementById('pdf-content');
html2pdf().from(element).save('导出内容.pdf');
};
注意事项
| 问题 | 建议 |
|---|---|
| 图片跨域问题 | 确保所有图片资源都允许跨域加载，否则可能无法渲染 |
| 中文乱码 | 使用 jsPDF 时需手动添加中文字体 |
| 表格样式丢失 | 尽量使用简单布局，避免复杂 CSS 样式 |
| 高度自适应 | 可结合 autoTable 插件绘制表格 |
可选库对比
| 库名 | 特点 | 是否推荐 |
|---|---|---|
html2canvas + jsPDF |
灵活，兼容性好 | ✅ 强烈推荐 |
html2pdf.js |
一行代码搞定，支持分页 | ✅ 推荐 |
dom-to-pdf |
轻量级，适合简单导出 | ✅ 推荐 |
pdfmake |
更适合生成结构化 PDF，不直接支持 HTML 渲染 | ❌ 不推荐用于 HTML 导出 |
📎 扩展：导出带样式的 PDF
如果需要保留完整的 CSS 样式，建议：
- 使用
<style>标签内联样式 - 或者用
iframe渲染一个完整的 HTML 页面并导出
总结
在 Vue 项目中，前端实现导出 PDF 的最佳实践是：
使用
html2canvas+jsPDF或html2pdf.js，将 DOM 节点转为图片再生成 PDF
这种方式不需要任何后端接口，适合导出报表、简历、合同等内容。