通过网上的查阅以后,说一下思路。就是将页面转换成图片格式。然后通过图片的base64码。生成PDF . .看了他们的文章,做了如下整理. .
说起来很容易,那么具体怎么实现呢& # 63;
<强> 1,我们要添加两个模块
第一个。将页面html转换成图片
npm安装,节省html2canvas
第二个。将图片生成pdf
npm安装jspdf——保存
<强> 2,定义全局函数. .创建一个htmlToPdf.js文件在指定位置。我个人习惯放在(src/组件/跑龙套/htmlToPdf)
//导出页面为PDF格式
从“html2Canvas”进口html2Canvas
从“JsPDF”进口JsPDF
出口默认{
安装(Vue、期权){
Vue.prototype。getPdf=function () {
var title=this.htmlTitle
html2Canvas (document.querySelector (# pdfDom) {
allowTaint:真
})。然后(函数(画布){
让contentWidth=canvas.width
让contentHeight=canvas.height
让pageHeight=contentWidth/592.28 * 841.89
让leftHeight=contentHeight
让位置=0
让imgWidth=595.28
让imgHeight=592.28/contentWidth * contentHeight
让pageData=https://www.yisu.com/zixun/canvas.toDataURL(图像/jpeg, 1.0)
让PDF=new JsPDF (”、“pt”、“a4”)
如果(leftHeight & lt;pageHeight) {
PDF。addImage (pageData, JPEG, 0, 0, imgWidth, imgHeight)
其他}{
而(leftHeight比;0){
PDF。addImage (pageData, JPEG, 0,位置,imgWidth, imgHeight)
leftHeight -=pageHeight
位置-=841.89
如果(leftHeight比;0){
PDF.addPage ()
}
}
}
PDF。保存(标题+ . pdf)
}
)
}
}
}
<强> 3,在main.js中使用我们定义的函数文件。
从“@/组件/导入htmlToPdf跑龙套/htmlToPdf '
Vue.use (htmlToPdf)
<强> 4,在需要的导出的页面. .调用我们的getPdf方法即可。
Html
& lt; div类="行" id=皃dfDom”比;//给自己需要导出的ui部分。定义id为“pdfDom”。此部分将就是pdf显示的部分
& lt;/div>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-primary”v:点击=癵etPdf()在导出PDF
js
出口默认{
数据(){
返回{
htmlTitle:“页面导出PDF文件名”
}
}
}
以上所述是小编给大家介绍的Vue导出页面为PDF格式的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
