后端导出不用说了,前端直接拿来接口调用就行,window.open('www.zcyykj.com');
从性能方面着手看,前端实现导出,如果只是导出当前页,接口数据需要拿来从新构建,如果数据量小的话,感觉也没啥,但如果导出的是全部数据,依然需要从新调用接口,然后筛出有用的数据从而重新构建JSON,接着继续遍历,筛给字符串,相比后端直接查出来,这个过程是很吃性能的。如果数据量大的话,效果会特别明显,就个人已经我的团队而言,还是后端实现导出比较靠谱。
话不多说直接上码:
首先把接口拿来的数据进行重构得到自己想要的JSON;
创建str变量,str=`title\n`;这里的title指(姓名,年龄,性别,工作);
接着遍历自己刚刚重构好的JSON(这里需要注意一下,重构JSON是因为后端会给你带来很多没用的数据,如果你不重构这些沉余的数据将来会展示到你导出的文件中,其次你需要按照显示的格式自行进行排序,否则会造成数据对应不上)
let str=`姓名,年龄,性别,工作\n`;
for(let i = 0 ; i < jsonData.length ; i++ ){
for(const key in jsonData[i]){
str+=`${jsonData[i][key] + '\t'},`;
}
str+='\n';
}
简单说一下这里的\t,\t为了不让表格显示其他格式;
遍历完以后需要解决防止乱码问题;
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
原理来了,其实就是通过动态创建a标签来实现前端导出功能;
const link = document.createElement("a");
link.href = uri;
最后设置导出文件的文件名就OK了。
link.download = '学生信息.xls';
link.click();
从实现上来说的话其实并不复杂,但从性能上看,两次字,呵呵(微笑)。
如果还是有同学看不懂的,这里我把他封装成了一个Vue组件,下文可以直接copy拿走,不谢。
自组件:
<template>
<div class="zcExport">
<el-button
type='primary'
size='mini'
@click="yes"
v-if='title=="导出全部"'>
导出全部
</el-button>
<el-button
v-else
@click="yes"
type='primary'
size='mini' >
导出
</el-button>
</div>
</template>
<script>
export default{
name:'zcExport',
props:['extype','title'],
methods:{
yes(){
this.$emit('exportck',this.zcExcel,this.extype);
},
zcExcel(title,table,xmlName){
const jsonData=table;
let str=title;
for(let i = 0 ; i < jsonData.length ; i++ ){
for(const key in jsonData[i]){
str+=`${jsonData[i][key] + '\t'},`;
}
str+='\n';
}
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
const link = document.createElement("a");
link.href = uri;
link.download = xmlName+'.xls';
link.click();
}
}
}
</script>
<style scoped>
</style>
父组件调用;
remindXLS(fn){
title=`姓名,性别,年龄,工作单位\n`;
xmlName="懿颖科技信息统计";
fn(title,this.data,xmlName);
},
各位小伙伴和童鞋有不明白的或者不会的依然可以留言...
依旧老样子,不喜勿喷,写给需要的人看,渣*请自觉绕道。
插播一条广告:
本公司自营项目:
微信电商小程序(拼团、砍价、会员、积分、限时秒杀、分销、直播等诸多功能);
刷脸支付(招商加盟,代理加盟,一站式源码部署);
另:接各种开发项目,PC、移动、webApp、小程序、App、M站等;
如果有需要请打开http://yykj.huijik.com进行留言,(进入页面下拉到最底端即可留言)