前端导出Excel并下载到本地

常见的导出一般有两种，异步导出和同步导出，异步导出一般涉及的数据量较大，需要后台进行处理，处理成功后会返回下载链接，访问链接即可进行下载，这里介绍的是同步导出，一般数据量较小。

后端返回的数据格式一般有两种：一种是file，一种是csv。csv相较于file来讲，是文本格式类型数据（这里返回什么类型数据对前端影响不大）。

大量数据异步导出的前端解决方案 vuex + 轮询 + 后端任务队列

前端开发，同步与异步的区别

前端通过axios封装的get或post请求，导出页面表格内容为Excel

xls与csv文件的区别

前端导出中的blob流转化----兼容主流浏览器 (而使用window.URL.createObjectURL这种方式是不兼容IE的)

导出excel需要告诉axios，返回数据响应的类型，然后前端再根据返回，进行下载，要注意文件名声明xlsx的后缀，不然在mac系统下，会下载为xls格式的文件，文件打不开会报错。

第一步：封装(post)

exportconstreturnTicketStatementExport=(data)=>{returnrequest({url:'/ticketStatistics/returnTicketStatementExport',method:'post',data: data,responseType:'blob',})}

第二步：在具体的vue文件中引入并使用

returnTicketStatementExport(this.queryParams).then((res)=>{let blob =newBlob([res.data],{type:"application/vnd.ms-excel"});//指定文件MIMElet a = document.createElement("a");
        a.download ="详情.xlsx";//指定下载的文件名
        a.href =URL.createObjectURL(blob);//  URL对象
        a.click();// 模拟点击URL.revokeObjectURL(a.href);// 释放URL 对象});

下面两个部分代码，容易误导新手，上面的代码就够新手用了。下面可以根据不同的业务需求场景进行参考即可。

get请求代码

exportdefaultfunction(data){axios({method:'post',url: data.url,//后端接口地址responseType:'blob',//bolb格式的请求方式headers:{Authentication:getToken('Admin-Token')//请求头},data: data.data //需要传给后端的请求参数体}).then(res=>{constBLOB= res.data;const fileReader =newFileReader();  
        fileReader.readAsDataURL(BLOB);//对请求返回的文件进行处理
        fileReader.onload=(e)=>{let a = document.createElement('a');
            a.download = data.name +'.xlsx'
            a.href = e.target.result;
            document.body.appendChild(a)
            a.click();
            document.body.removeChild(a)}}).catch(err=>{
        console.log(err.message)})}

post请求代码

exportdefaultfunction(data){axios({url: data.url,method:'get',responseType:'blob',params: data.data,//与post传参方式不同之处headers:{Authentication:getToken()}}).then(res=>{var blob =newBlob([res.data],{type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});var filename = data.name +'.xlsx';var downloadElement = document.createElement('a');var href = window.URL.createObjectURL(blob);//创建下载的链接
        downloadElement.style.display ='none';
        downloadElement.href = href;
        downloadElement.download =filename ;//下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click();//点击下载
        document.body.removeChild(downloadElement);//下载完成移除元素
        window.URL.revokeObjectURL(href);//释放掉blob对象}}