在Vue⾥如何把⽹页的数据导出到Excel的⽅法
前⾔：在做后台管理的时候，我们往往有需要把⽹页上⾯的数据导出到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'}
]
{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 = ateTextRange();
sel.select();
xlsheet.Paste();
oXL.Visible = true;
jquery在项目里是干啥的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) {
place(/{(\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 = ateElement('a');
a.href = ateObjectURL(blob);
a.download = name;  //这⾥这个name就是对应的⽂件名！
a.click();
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等其他前端框架，你只需要将封装好的⽅法引⼊即可，不说了，太⽜ * 了
到此这篇关于在Vue⾥如何把⽹页的数据导出到Excel 的⽂章就介绍到这了，更多相关Vue数据导出到Excel 内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。