前端导出Excel并下载到本地

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

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

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

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

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

xls与csv文件的区别

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

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

第一步：封装(post)

export const returnTicketStatementExport = (data) => {
  return request({
    url: '/ticketStatistics/returnTicketStatementExport',
    method: 'post',
    data: data,
    responseType: 'blob',
  })
}
1
2
3
4
5
6
7
8

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

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

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

get请求代码

export default function (data) {
    axios({
        method: 'post',
        url: data.url,  //后端接口地址
        responseType: 'blob',  //bolb格式的请求方式
        headers: {
            Authentication: getToken('Admin-Token')  //请求头
        },
        data: data.data //需要传给后端的请求参数体
    }).then(res => {
        const BLOB = res.data;
        const fileReader = new FileReader();  
        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)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

post请求代码

export default function (data) {
     axios({
         url: data.url,
         method: 'get',
         responseType: 'blob',
         params: data.data,  //与post传参方式不同之处
         headers: {
           Authentication: getToken()       
         }
     }).then(res => {
        var blob = new Blob([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对象
        }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24