纯前端导出页面表单为pdf文档（带图片）

        最近碰到一个新的需求，后端返回了一些数据和图片，前端组装成表单展示，最后需要导出为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
                })
            },

总结：另外我尝试过其他插件也可以实现这个功能

 import jsPDF from 'jspdf';

 import html2canvas from 'html2canvas';

这两个插件配合使用也是可以实现pdf导出的，存在的问题是导出超长页面会缺失掉超出页面的部分，或者会压缩字体和图片，实际效果没有上面使用的这个好。

最后文章的总结主要是帮助自己梳理问题解决的方法，以及能给其他人一点帮助。