Vue导出页面为PDF格式的实现思路
程序员文章站
2022-04-10 12:16:06
通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成pdf..看了他们的文章,做了如下整理..
说起来很容易,那么具体怎么实现呢&...
通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成pdf..看了他们的文章,做了如下整理..
说起来很容易,那么具体怎么实现呢?
1 、我们要添加两个模块
第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save
2、定义全局函数..创建一个htmltopdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmltopdf')
// 导出页面为pdf格式 import html2canvas from 'html2canvas' import jspdf from 'jspdf' export default{ install (vue, options) { vue.prototype.getpdf = function () { var title = this.htmltitle html2canvas(document.queryselector('#pdfdom'), { allowtaint: true }).then(function (canvas) { let contentwidth = canvas.width let contentheight = canvas.height let pageheight = contentwidth / 592.28 * 841.89 let leftheight = contentheight let position = 0 let imgwidth = 595.28 let imgheight = 592.28 / contentwidth * contentheight let pagedata = canvas.todataurl('image/jpeg', 1.0) let pdf = new jspdf('', 'pt', 'a4') if (leftheight < pageheight) { pdf.addimage(pagedata, 'jpeg', 0, 0, imgwidth, imgheight) } else { while (leftheight > 0) { pdf.addimage(pagedata, 'jpeg', 0, position, imgwidth, imgheight) leftheight -= pageheight position -= 841.89 if (leftheight > 0) { pdf.addpage() } } } pdf.save(title + '.pdf') } ) } } }
3、在main.js中使用我们定义的函数文件。
import htmltopdf from '@/components/utils/htmltopdf' vue.use(htmltopdf)
4、在需要的导出的页面..调用我们的getpdf方法即可.
html
<div class="row" id="pdfdom" style="padding-top: 55px;background-color:#fff;"> //给自己需要导出的ui部分.定义id为"pdfdom".此部分将就是pdf显示的部分 </div> <button type="button" class="btn btn-primary"v-on:click="getpdf()">导出pdf</button>
js
export default { data () { return { htmltitle: '页面导出pdf文件名' } } }
总结
以上所述是小编给大家介绍的vue导出页面为pdf格式的实现思路,希望对大家有所帮助
上一篇: VBS教程:属性-Type 属性
下一篇: 爆笑,又逗又损的二货