React导出Excel表

当我向后端发送导出请求时，我发现收到的内容是这样像乱码一样的内容，我发送的不是导出Excel表请求吗，这并不是我想要的内容，其实是因为后端返回的是二进制流文件，而浏览器不会自动解析二进制数据为可读格式，因此我们需要将二进制流文件进行格式转换。

那如何将二进制流文件转换为Excel表？我们可以借助js的第三方库，还可以使用JavaScript的URL.createObjectURL()和a标签等方式进行下载。这里介绍比较简单的2种方法，不需要借助第三方库，就能轻松实现。

方式一：

1. 首先将返回的数据格式转为blob类型的对象 responseType: “blob”,
2. 将Blob对象转为可下载的URL
3. 创建下载链接
4. 定义下载的文件名
5. 触发下载
6. 清理资源

export async function exportExcelUserUsingPost(
  body:API.exportExcelRequest,
  options?: { [key: string]: any },
) {
  const response = await request('/admin/exportExcel', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json'
  },
  responseType: "blob",
  data: body,
  ...(options || {}),
  });
  // 转换Blob对象为可下载的URL
  const url = window.URL.createObjectURL(response);
  // 创建一个下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'users.xlsx'; // 设置下载文件的名称
  // 触发下载
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 下载完成后清理资源
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(url);
}

方式二：

1. 创建一个 FileReader 实例，用于读取文件内容
2. 调用 readAsDataURL 方法将其转换为 DataURL
3. 创建下载链接
4. 定义下载的文件名
5. 触发下载
6. 清理资源

export async function exportExcelUserUsingPost(
  body:API.exportExcelRequest,
  options?: { [key: string]: any },
) {
  const response = await request('/admin/exportExcel', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json'
  },
  data: body,
  responseType: "blob",
  ...(options || {}),
  });
  	//创建一个 FileReader 实例，用于读取文件内容。
  	let reader = new FileReader();
  	//调用 readAsDataURL 方法将其转换为 DataURL
    reader.readAsDataURL(response);
    //设置 onload 事件处理程序，它将在读取操作成功完成时触发
    reader.onload = function() {
	    const dataUrl = reader.result;
	    const downloadLink = document.createElement('a');
	    downloadLink.download = 'users.xlsx';// 设置下载文件的名称
	      // 触发下载
	    document.body.appendChild(downloadLink);
	    downloadLink.href = dataUrl;
	    downloadLink.click();
	    // 下载完成后清理资源
	    document.body.removeChild(downloadLink);
  }
}

当文件较大时，使用 DataURL 可能会因为 URL 长度限制而导致问题。因为 FileReader 的 readAsDataURL 方法会将整个文件内容编码为一个很长的 Base64 字符串，并将其嵌入到一个 DataURL 中，如果文件大小超过了这个限制，生成的 DataURL 将无法被使用，因为浏览器无法处理这么长的 URL。同时，转换后的字符串会消耗大量内存，在文件很大时，Base64 编码和解码过程可能会占用大量 CPU 时间，导致应用程序响应缓。因此更推荐第一种方式。