axios 文件流导出excel

最新推荐文章于 2024-08-07 14:53:07 发布

原创最新推荐文章于 2024-08-07 14:53:07 发布 · 860 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#axios #vue.js #javascript

个人博文专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍使用Axios进行文件流操作，实现从后端获取数据并导出为Excel文件的过程。包括设置responseType为arraybuffer接收二进制数据，以及在前端处理数据流生成并下载Excel文件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 文件流导出excel

一 . 设置responseType 为 arraybuffer

axios.post(`${origin}/baisp_appointment/api/plat/xxx`, params, {
    responseType: 'arraybuffer',
    headers: { token: getToken(), account: getAccount() },
}).then((res) => {
    let fileName = format(new Date(), 'yyyy-MM-dd');
    this.exportSearchList(res.headers['content-disposition'].split('=')[1], res.data);
}).catch();

二.处理数据流导出文件

//流转化
 exportSearchList(dowLoadFileName, result) {
     let blob = new Blob([result]);
     const fileName = dowLoadFileName;
     // 判断浏览器
     var brower = '';
     if (navigator.userAgent.indexOf('Edge') > -1) {
         brower = 'Edge';
     }

     if ('download' in document.createElement('a')) {
         // 非IE下载
         if (brower == 'Edge') {
             navigator.msSaveBlob(blob, fileName);
             return;
         }
         const elink = document.createElement('a');
         elink.download = fileName;
         elink.style.display = 'none';
         elink.href = URL.createObjectURL(blob);
         document.body.appendChild(elink);
         elink.click();
         URL.revokeObjectURL(elink.href);
         // 释放URL 对象
         document.body.removeChild(elink);
     } else {
         // IE10+下载
         navigator.msSaveBlob(blob, fileName);
     }
 },