前端实现导出（下载）

后端导出不用说了，前端直接拿来接口调用就行，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进行留言，（进入页面下拉到最底端即可留言）