Vue中前端实现生成 PDF 并下载

思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。

1. 安装及引入

//将页面html转换成图片npminstallhtml2canvas--save//将图片生成pdfnpminstalljspdf--save

在项目主文件 main.js 中引入定义好的实现方法并注册

importhtmlToPdffrom'@/utils/htmlToPdf';//使用Vue.use()方法就会调用工具方法中的install方法Vue.use(htmlToPdf);

传送门：Vue中 Vue.use() 原理及使用

2. 封装导出 pdf 文件方法

配置详解

letpdf=newjsPDF('p','pt',[pdfX,pdfY]);第一个参数：l：横向p：纵向第二个参数：测量单位（"pt"，"mm","cm","m","in"or"px"）；第三个参数：可以是下面格式，默认为“a4”。如需自定义格式，只需将大小作为数字数组传递，如：[592.28,841.89];a0-a10b0-b10c0-c10dllettergovernment-letterlegaljunior-legalledgertabloidcredit-card

pdf.addPage() 在PDF文档中添加新页面，默认a4。

参数如下：

pdf.addImage() 将图像添加到PDF。参数如下：

删除某页 pdf

lettargetPage=pdf.internal.getNumberOfPages();//获取总页pdf.deletePage(targetPage);//删除目标页

保存 pdf 文档

pdf.save(`测试.pdf`);

封装导出 pdf 文件方法（utils/htmlToPdf.js）

//导出页面为PDF格式importhtml2Canvasfrom'html2canvas'importJsPDFfrom'jspdf'exportdefault{install(Vue,options){Vue.prototype.getPdf=function(){//当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载lettop=document.getElementById('pdfDom');if(top!=null){top.scrollIntoView();top=null;}lettitle=this.exportPDFtitle;html2Canvas(document.querySelector('#pdfDom'),{allowTaint:true}).then(function(canvas){//获取canvas画布的宽高letcontentWidth=canvas.width;letcontentHeight=canvas.height;//一页pdf显示html页面生成的canvas高度;letpageHeight=contentWidth/841.89*592.28;//未生成pdf的html页面高度letleftHeight=contentHeight;//页面偏移letposition=0;//html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）letimgWidth=841.89;letimgHeight=841.89/contentWidth*contentHeight;letpageData=canvas.toDataURL('image/jpeg',1.0);letPDF=newJsPDF('l','pt','a4');//两个高度需要区分:一个是html页面的实际高度，和生成pdf的页面高度//当内容未超过pdf一页显示的范围，无需分页if(leftHeight<pageHeight){PDF.addImage(pageData,'JPEG',0,0,imgWidth,imgHeight)}else{while(leftHeight>0){PDF.addImage(pageData,'JPEG',0,position,imgWidth,imgHeight)leftHeight-=pageHeight;position-=592.28;//避免添加空白页if(leftHeight>0){PDF.addPage();}}}PDF.save(title+'.pdf')})}}}

相关组件中应用

<template><divclass="wrap"><divid="pdfDom"style="padding:10px;"><el-table:data="tableData"border><el-table-columnprop="date"label="日期"width="250"></el-table-column><el-table-columnprop="name"label="姓名"width="250"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div><buttontype="button"style="margin-top:20px;"@click="btnClick">导出PDF</button></div></template><script>exportdefault{data(){return{exportPDFtitle:"页面导出PDF文件名",tableData:[{date:'2016-05-06',name:'王小虎',address:'重庆市九龙坡区火炬大道'},{date:'2016-05-07',name:'王小虎',address:'重庆市九龙坡区火炬大道'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-08',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-06',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-06',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-07',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-08',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-06',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-07',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-06',name:'王小虎',address:'南京市江宁区将军大道'},{date:'2016-05-07',name:'王小虎',address:'南京市江宁区将军大道'},,{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-08',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-06',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-07',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-08',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-06',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-08',name:'王小虎',address:'武汉市洪山区文化大道'},{date:'2016-05-06',name:'王小虎',address:'武汉市洪山区文化大道'},{date:'2016-05-07',name:'王小虎',address:'武汉市洪山区文化大道'},{date:'2016-05-06',name:'王小虎',address:'南京市江宁区将军大道'},{date:'2016-05-07',name:'王小虎',address:'武汉市洪山区文化大道'},]}},methods:{btnClick(){this.$nextTick(()=>{this.getPdf();})},},}</script>

效果

待优化部分

分页时，页面内容被截断（欢迎留言讨论交流）；

不同内容，另起一页开始；思路：计算超出内容，占最后一页的高度（设定间距 = 页面高度 - 超出部分高度）。