好资源导航 » 文章资讯 » vue中将网页打印成pdf实例代码

vue中将网页打印成pdf实例代码

2024-02-19 18:01:03 50

整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。






importhtml2Canvasfrom'@/components/html2canvas.js'
importJsPDFfrom'@/components/jsPdf.debug.js'

exportdefault{
methods:{
getPdf:function(){
let_this=this
letpdfDom=document.querySelector('#pdfDom')
html2Canvas(pdfDom,{
onrendered: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(_this.pdfData.title+'.pdf')
}
})
html2Canvas()
},
}
}

需要引入

html2canvas.js'

和

jsPdf.debug.js

这两个插件库可轻松百度到。如果eslint验证报错，可在eslintignore中设置不对这两个文件进行验证。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue中将网页打印成pdf实例代码

热门推荐

随机推荐