vue 实现导出pdf
实现 Vue 导出 PDF 的方法
使用 html2pdf.js 库
html2pdf.js 是一个基于 jsPDF 和 html2canvas 的库，可以直接将 HTML 元素转换为 PDF。
安装依赖：
npm install html2pdf.js示例代码：
import html2pdf from 'html2pdf.js'
export default {
methods: {
exportToPDF() {
const element = document.getElementById('content-to-export')
const opt = {
margin: 1,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}
html2pdf().from(element).set(opt).save()
}
}
}使用 jsPDF 和 html2canvas
这两个库组合可以实现更灵活的 PDF 导出功能。
安装依赖：
npm install jspdf html2canvas示例代码：
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
export default {
methods: {
async exportToPDF() {
const element = document.getElementById('content-to-export')
const canvas = await html2canvas(element)
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF('p', 'mm', 'a4')
const imgWidth = 210
const imgHeight = (canvas.height * imgWidth) / canvas.width
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
pdf.save('document.pdf')
}
}
}使用 vue-html2pdf 插件
这是一个专门为 Vue 设计的 PDF 导出插件。
安装依赖：
npm install vue-html2pdf示例代码：
import VueHtml2pdf from 'vue-html2pdf'
export default {
components: { VueHtml2pdf },
methods: {
generateReport() {
this.$refs.html2Pdf.generatePdf()
}
}
}模板部分：
<vue-html2pdf
ref="html2Pdf"
:show-layout="false"
:float-layout="true"
:enable-download="true"
filename="document"
:paginate-elements-by-height="1400"
:pdf-quality="2"
pdf-format="a4"
pdf-orientation="portrait"
>
<div slot="pdf-content">
<!-- 要导出的内容 -->
</div>
</vue-html2pdf>样式优化建议
为确保 PDF 导出效果良好，建议：
- 使用固定宽度布局
- 避免使用背景图片
- 为要导出的元素设置明确的尺寸
- 测试不同分辨率的显示效果
注意事项
- 跨域图片可能导致导出问题
- 复杂 CSS 可能无法完全保留原始样式
- 大量内容可能需要分页处理
- 某些 CSS 属性如 position: fixed 可能无法正常工作
