接口返回excel数据前台通过浏览器下载

最新推荐文章于 2024-09-29 14:40:00 发布

ghvjhfjf

最新推荐文章于 2024-09-29 14:40:00 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

文章标签： excel javascript 前端

本文链接：https://blog.csdn.net/ghvjhfjf/article/details/128333413

本文介绍了一种使用前端技术实现从服务器获取Excel数据并通过浏览器下载的方法。具体步骤包括：调用后端接口获得Excel文件的二进制数据，利用Blob对象处理这些数据，然后创建<a>标签触发点击事件实现下载。

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

接口返回excel数据前台通过浏览器下载

let data = null;
      try{
        data = await exportDimTypeVal({//接口拿到excel二进制数据
            "list": this.tableData
        })
      }catch(res){
        data = res;
      }
      console.log(data)
      const blob = new Blob([data.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
      });
      const objectUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = objectUrl;
      const fieldName = 'text';
      const time = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
      
      a.download = `${fieldName}${time}.xlsx`; // 文件名 ，
      // a.click();
      // 下面这个写法兼容火狐
      a.dispatchEvent(
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window,
        })
      );
      window.URL.revokeObjectURL(blob);