发布网友 发布时间:2024-10-01 02:16
共1个回答
热心网友 时间:2024-10-14 08:36
思路:通过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-cardpdf.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>效果待优化部分分页时,页面内容被截断(欢迎留言讨论交流);
不同内容,另起一页开始;思路:计算超出内容,占最后一页的高度(设定间距=页面高度-超出部分高度)。