刚好碰到这么一个需求，前端需要将后端返回的json对象数据生成表单样式的pdf文件，首次接触所以简单记录一下。
经过反复查找大致流程为：现在页面画一个表单=====>拿到数据将数据放表单中=====>给表单最外层加个ref利用html2Canvas生成base64图片=====>最后用jspdf将图片生成pdf。
先上个图：
首先安装依赖组件
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdf
然后将拿到的数据放入表单（表单大家都会吧，我就不往出贴了，放个图好了，主要看下ref的位置，一些其他的样式问题可根据自身需求调整）中
通过引用并调用html2canvas先生成base64图片
import html2canvas from 'html2canvas'
import jsPDF from "jspdf";
//点击事件 row是json对象数据，里面有要用的PDF文件名
AccountStatement(row) {
html2canvas(this.$refs.vueDomSaveToImage).then(res=>{ //图片生成
downloadPDF(res) //pdf生成 将图片生成后的json对象带过去，里面有要用到的参数
})
}
//调
4605
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
