从后端获取excel文件并导出

最新推荐文章于 2024-06-18 14:12:14 发布

原创最新推荐文章于 2024-06-18 14:12:14 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #react

web前端专栏收录该内容

79 篇文章

订阅专栏

本文介绍如何从前端发起请求获取后端的Excel文件，并通过Blob对象转换数据格式实现文件下载。文中详细展示了使用axios进行API请求及处理响应的过程。

从后端获取excel文件并导出

1. blob文件类型

首先需要了解什么是blob文件类型，根据官方的示意：

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 File 文档。

接受 Blob 对象的API也被列在 File 文档中。

2. 请求数据并下载

整体思想是这样的，就是正常的API请求，获取文件数据后，在本地模拟一次点击按钮下载，这次下载是在第一次请求api的基础上，把后端返回的文件数据转换成合适的格式之后再下载下来。

//	调用接口，不知道其他后台是怎么写的。但是我这边要是不加上请求的类型responseType的时候，返回值会乱码
Authorizationaxios({
      method: 'post',
      url: `${API_PREFIX}/api/v1/users/Company/Authorized?exportToExcel=true`,
      data: needExportedData,
      responseType: 'blob',
    })

Authorizationaxios({
      method: 'post',
      url: `${API_PREFIX}/api/v1/users/Company/Authorized?exportToExcel=true`,
      data: needExportedData,
      responseType: 'blob',
    }).then((res) => {
      // 获取后台传给前台的数据名
      let tempstr = res.headers['content-disposition'].split('filename*=')[1];
      let downloadName = decodeURI(tempstr.split("'")[2]);
      let bolbUrl = window.URL.createObjectURL(res.data);
      let aDownload = document.getElementById('download');
      aDownload.href = bolbUrl;
      aDownload.download = downloadName;
      aDownload.click();
      window.URL.revokeObjectURL(bolbUrl);
      message.success('下载成功，请耐心等待');
    })

正确返回后的data是这样的，我这里将获取的文件内容转换为blob数据类型，这是最常见的下载文件格式。