前端导出Excel并下载到本地

  • A+
所属分类:笔记 vue javascipt

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

后端返回的数据格式一般有两种:一种是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',
  })
}

第二步:在具体的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 对象
      });

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

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)
    })
}

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对象
        }
   }
w3cjava

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: