|
|
一、安装所需要的依赖
1.将页面html转换成图片
npm install --save html2canvas
2.将图片转换成gif
npm install jspdf --save
二、定义全局函数，创建一个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('#pefDom'),{
allowTait:true
}).then(function (canvas){
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.68 * 841.89
let leftHeight = contentHeight
let postion = 0
let imgWidth = 595.68
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,postiotion,imgWidth,imgHeight)
leftHeight -= pageHeight
position -= 841.89
if(leftHeight > 0){
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
}
}
} |
三、在main.js中使用我们定义的函数文件。
import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf) |
四、在需要的导出页面 调用我们的getPdf方法即可
<div class="row" id="pdfDom" style="padding-top:55px;background-color:#fff">
//给自己需要导出的UI部分 定义id为'pdfDom'此部分将是pdf显示的部分
</div>
<button type="button" class="btn btn-parimary" @click="getPdf()"></button>
......
export default{
data(){
return {
htmlTitle:'页面导出PDF文件名'
}
}
} |
----------------------------
原文链接:https://www.jianshu.com/p/ab3d2d507d78
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 flybird 在 2021-02-15 13:27:57 重新编辑]
|
网站系统异常
| 系统异常信息 |
Request URL:
http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=3653
java.lang.NullPointerException
如果你不知道错误发生的原因，请把上面完整的信息提交给本站管理人员。
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → vue导出pdf格式文件
消息
查看
搜索
好友
邮件
复制
引用