最近碰到一个新的需求,后端返回了一些数据和图片,前端组装成表单展示,最后需要导出为pdf格式,如何前端去实现这个功能,这里可以借助一个插件html2pdf来实现。
一、页面上表单展示的效果图如下:
导出的效果图如下:
二、代码实现,先安装需要的html转pdf插件,绑定需要导出pdf的表单dom元素,直接利用插件实现导出,你可以设置导出前的配置项options,包含导出文件名,图片类型,压缩率,页面边距等等。
(1)安装html2pdf.js插件
npm install html2pdf.js --save
import html2pdf from 'html2pdf.js';
exportToPDF() {
this.isShow = true
// 使用 html2pdf.js 导出 PDF
const targetElement = this.$refs.formRef.$el;
html2pdf().set({
margin: 10,
filename: '问题清单.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true }, // 添加useCORS属性
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
}).from(targetElement).save();
this.$nextTick(() => {
this.isShow = false
})
},