后端返回文件流格式前端导出下载文件

最新推荐文章于 2025-06-13 09:47:18 发布

原创最新推荐文章于 2025-06-13 09:47:18 发布 · 295 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #ajax #css3

由于下载数据过多，前端不便操作，前端直接调接口拿到文件流，调用方法实现下载功能。

代码如下：

const exportList = () => {
  ElMessageBox.confirm('是否导出全部表格?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const data = await exportListTest({
        ...newObj,
      });
      let objectUrl = data; //这是调接口拿到的文件流
      const blob = new Blob([data], {
        type: 'application/vnd.ms-excel;charset=utf-8',
      }); //创建一个新的 Blob 对象 ,这里的type和后端请求携带的 ContentType 相对应
      objectUrl = URL.createObjectURL(blob); //  把一个blob对象转化为一个Blob URL，创建下载链接
      const a = document.createElement('a'); // 生成一个a标签
      a.href = objectUrl;
      a.download = '邻域信息表.xlsx'; // 定义文件名
      a.click(); // 点击下载
      a.remove(); // 下载完成后移除元素
      URL.revokeObjectURL(objectUrl); // 释放掉blob对象
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作失败',
      });
    });
};