前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求,本文将对此做探讨。
开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式 ,尤其是导出excel后自定义样式,这在一些现存封装好的组件是不好实现的,本文可以实现!
本文导出Excel方法的优点: 网页上的table与导出Excel之后的table完全独立,也就是说你导出Excel之后的内容与网页没有直接联系,这意味着数据导出到Excel后有非常强的1定制性 ,实在不理解这句话也没关系,本文看完你自然就明白了。2能跨浏览器兼容,甚至是某E浏览器。3导出非常快,不卡顿!
一、使用脚手架创建一个Vue项目,在生成的src目录下创建exportToExcel.js文件(名称自取), 并且到App.vue里面快速模拟生成一份表格数据
1、我这里简单模拟网页上一份表格数据,使用的是iview的table组件,网页上展示的表格的组件你可以用你自己喜欢的组件,我这里做演示用,你完全可以不跟我一样;
<style lang="less"> </style> <template> <div> <h2>这是一个使用iview的table组件,做展示用,你当然可以在自己的项目里用自己想要的任何table组件</h2> <Table :columns="column" :data="tableData"></Table> //iview的Table组件 <Button @click="toExcel">导出表格数据到Excel</Button> //导出excel的按钮 </div> </template> <script> import transform from './exportToExcel.js' //这个方法来源于二步骤封装的方法,往下看 export default { name:'App', //这是一个父组件,名称为App.vue data(){ return { tableData:[], //表格数据 column:[] //表格的列 } }, methods:{ toExcel(){ //调用我们封装好的方法,传3个参数过去,分别为:数据,文件名,回到函数(可根据自己需求决定回调是否需要) transform(this.tableData, '我是文件名', this.callback) }, callback(info){ console.log(info) } }, created(){ //模拟网络请求 this.tableData = [ {index:1,name:'我是1号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:2,name:'我是2号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:3,name:'我是3号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:4,name:'我是4号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:5,name:'我是5号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:6,name:'我是6号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:7,name:'我是7号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:8,name:'我是8号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:9,name:'我是9号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:10,name:'我是10号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:11,name:'我是11号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:12,name:'我是12号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}, {index:13,name:'我是13号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:14,name:'我是14号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'}, {index:15,name:'我是15号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'} ] this.column = [ {key:'index',title:'序号',width:120}, {key:'name',title:'姓名',width:120}, {key:'age',title:'年龄',width:120}, {key:'sex',title:'性别',width:120}, {key:'hobby',title:'爱好',width:120}, {key:'hair',title:'发量',width:120}, {key:'salaried',title:'薪水',width:120} ] } } </script>
二、进入exportToExcel.js文件,写导出业务逻辑代码,也就是上面对应的transform这个方法
书写思路:采用HTML字符串拼接的方法,拼接出一个table,即可显示到Excel;换句话来说使用HTML的语法写出来的table能展示到excel上面,还能携带样式!请用心看完拼接过程,拼接看懂了,你会90%了!
var idTmr; //自己定义一个函数transform,在里面写我们的业务逻辑 function transform(table, name, callback) { //table为表格数据,name为导出文件名, //callback为导出完毕回调,方便你知道导出完成了(可根据自己需求决定是否需要) let tableInnerHTML = '' let headerData = ['序号','姓名','年龄','性别','爱好','发量','薪水'] let bodyData = table //这里对应是表格数据,我们只需要传过来即可 //拼接完全使用thead、tbody、tr、td、th,并且相应的tr、th、td里可以写一些类似colspan(决定占几列) //rowspan(决定占几行)的属性、可以用作合并行、合并列等高级操作 tableInnerHTML += '<thead><tr>'; //头部部分开始拼接! tableInnerHTML += `<th colspan=${headerData.length} style='background:#CCFFFF;border:solid;'>` + "程序员的将来" + "</th></tr>" tableInnerHTML += '<tr>' headerData.forEach(item => { tableInnerHTML += "<th rowspan='1' style='background:#FFFFCC;border:solid'>" + item + "</th>" }) tableInnerHTML += '</tr></thead>'; //头部部分结束 tableInnerHTML += '<tbody>' //身体部分开始 bodyData.forEach(item => { tableInnerHTML += "<tr>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.index + "</td>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.name + "</td>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.age + "</td>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.sex + "</td>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.hobby + "</td>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.hair + "</td>" tableInnerHTML += "<td align='center' style='border:solid'>" + item.salaried + "</td>" tableInnerHTML += "</tr>" }) tableInnerHTML += '</tbody>'; //身体结束 //------------OK,到此为止拼接工作做完,也就是基本的数据已经被拼接成表格了-------------------- //tip开始(下面还有个tip结束的位置) /*-------从tip开始到tip结束的过程是判断浏览器类型步骤,做兼容性处理!对于你来说你完全可以不用 深入理解这里面的逻辑,直接复制到自己的项目里去,不会存在任何浏览器兼容性的问题!*/ function getExplorer() { var explorer = window.navigator.userAgent; if (explorer.indexOf('MSIE') >= 0) { return 'ie'; // ie } else if (explorer.indexOf('Firefox') >= 0) { return 'Firefox'; // firefox } else if (explorer.indexOf('Chrome') >= 0) { return 'Chrome'; // Chrome } else if (explorer.indexOf('Opera') >= 0) { return 'Opera'; // Opera } else if (explorer.indexOf('Safari') >= 0) { return 'Safari'; // Safari }; }; if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') { name += '.xls'; } if (getExplorer() === 'ie') { var curTbl = table; var oXL = new ActiveXObject('Excel.Application'); var oWB = oXL.Workbooks.Add(); var xlsheet = oWB.Worksheets(1); var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); sel.select(); sel.execCommand('Copy'); xlsheet.Paste(); oXL.Visible = true; try { var fname=oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (*.xls), *.xls'); } catch (e) { print('Nested catch caught ' + e); } finally { oWB.SaveAs(fname); // oWB.Close(savechanges = false); oXL.Quit(); oXL = null; idTmr = setInterval(Cleanup(), 1); } } else { tableToExcel(tableInnerHTML, name, callback); /*在这调用下面的一个方法,传入拼接完成 的表格,文件名,回调函数。该方法是干嘛的请往下看*/ } //tip结束 } //此括号结束,我们自己封装的transform方法也结束了!90%的逻辑完成了! /*下面的两个函数对于你来说你也完全不用深入理解里面的逻辑,你只要知道,他是在帮助你做转换,帮助你 将拼接好的HTML字符串模板真正地转换并且输出到Excel里面去,直接当成固定书写方法,直接拿来用即可*/ function Cleanup() { window.clearInterval(idTmr); } let tableToExcel = (function () { let template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>'; let format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); }; return function (table, name, callback) { let ctx = { worksheet: name || 'Worksheet', table: table }; let blob = new Blob([format(template, ctx)]); let a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; //这里这个name就是对应的文件名! a.click(); a.remove(); callback('success'); /*这里调用我们自己传入的回调方法,这样导出Excel完成后你就能 在外面知道导出完毕,并且再往下做自己其他的逻辑*/ }; })(); export default transform; //导出自己封装的transform方法
上效果:
三、封装工作完成了,再回过头来看 二 步骤在使用自己封装的transform方法,只需要传入需要导出的数据、文件名、回调即可,到这里你应该理解了:
1、什么是网页与Excel完全分离,因为你Excel只受你数据的影响,你传过来什么数据它最终就根据你传来的数据,拼接成你想要的表格,不受网页影响(有些人封装的导出Excel组件是和网页密切关联,首先肯定在网页上需要有一份真正被渲染好的表格存在,然后再在对应的地方使用对应的接口,传入对应的属性等等…不作过多探讨),本文其实也在网页上渲染了一份表格截图给你们看了,但这完全是演示用,看到这里为止我相信你也完全相信,网页上的表格如果我不需要,完全不用渲染,因为我只是需要它的数据而已,只要接口返回了数据,那么我就调用封装的transform方法传入数据,即可开始导出excel
2、导出Excel同时携带样式,你返回步骤三看看我们在拼接td、tr、th的时候,我想要写什么样式直接像在HTML里写内联样式一样,直接上style,在style里写你想写的样式,什么背景颜色,字体,边框,缩进等等,自己去尝试吧,很香的!
3、在部分需求中可能有些高级操作导出的某列自身可能会占据(2列、3列、4列、…列),某行会占据(2行、3行、4行、…行)只需学习上面的写法,设置colspan、rowspan属性即可
4、导出真的快,这点如果你没有用过一些别人封装好的导出Excel组件库,你真的无法感受,你只需知道哪怕数据成百上千,使用这个方法导出真的流畅!!!!
四、最后补充,本文是在教你如何封装将网页上的数据导出到Excel的方法,不是在封装组件!!!我们是在封装一个方法,一个函数,这意味着什么?你完全可以不用在Vue里使用,哪怕是Jquery、React等其他前端框架,你只需要将封装好的方法引入即可,不说了,太牛 * 了!!!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]