微客导航 » 文章资讯 » Vue导出页面为PDF格式的实现思路

Vue导出页面为PDF格式的实现思路

2023-09-09 15:03:04 188

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理..

说起来很容易,那么具体怎么实现呢?

1、我们要添加两个模块

第一个.将页面html转换成图片

npminstall--savehtml2canvas

第二个.将图片生成pdf

npminstalljspdf--save

2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')

//导出页面为PDF格式
importhtml2Canvasfrom'html2canvas'
importJsPDFfrom'jspdf'
exportdefault{
install(Vue,options){
Vue.prototype.getPdf=function(){
vartitle=this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'),{
allowTaint:true
}).then(function(canvas){
letcontentWidth=canvas.width
letcontentHeight=canvas.height
letpageHeight=contentWidth/592.28*841.89
letleftHeight=contentHeight
letposition=0
letimgWidth=595.28
letimgHeight=592.28/contentWidth*contentHeight
letpageData=canvas.toDataURL('image/jpeg',1.0)
letPDF=newJsPDF('','pt','a4')
if(leftHeight0){
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中使用我们定义的函数文件。

importhtmlToPdffrom'@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、在需要的导出的页面..调用我们的getPdf方法即可.

Html


//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分

导出PDF

exportdefault{
data(){
return{
htmlTitle:'页面导出PDF文件名'
}
}
}

总结

以上所述是小编给大家介绍的Vue导出页面为PDF格式的实现思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

Vue导出页面为PDF格式的实现思路

热门推荐

随机推荐