Vue项目导出为PDF的解决方案.pdf
1星 需积分: 47 187 浏览量
2020-08-20
07:59:29
上传
评论 1
收藏 276KB PDF 举报 
用于Vue项目中页面内容导出为PDF文件的
解决方案
在实际应用中，可能用户希望将系统中一个页面展示的所有数据报
表，用PDF的文件格式下载下来，以便于其他用途。但是在系统中应用
到的大部分可以绘制数据报表的插件或组件，只能做到将一个数据报表
以其他的文件形式（如：图片等）导出出来，无法将多个报表呈现在一
个文件中。本篇描述的就是，在Vue2.0的项目中，遇到类似的需求，
如何将需要的部分页面内容导出为PDF文件。
1.使用npm安装依赖
1 a.将html页面转换成图片
2 npminstall‐‐savehtml2canvas
3 b.将图片生成pdf
4 npminstalljspdf‐‐save
2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件，内容如下：
1 //导出页面为PDF格式
2 importhtml2Canvasfrom'html2canvas'
3 importJsPDFfrom'jspdf'
4 exportdefault{
5 install(Vue,options){
6 Vue.prototype.getPdf=function(){
7 vartitle=this.htmlTitle
8 html2Canvas(document.querySelector('#pdfDom'),{
9 allowTaint:true,
10 useCORS:true
11 }).then(function(canvas){
12 letcontentWidth=canvas.width
13 letcontentHeight=canvas.height
14 letpageHeight=contentWidth/592.28*841.89
15 letleftHeight=contentHeight
16 letposition=0
17 letimgWidth=595.28
资源评论
m2maomao2021-09-27骗人！哪里能多页导出了？
