前端攻克难题：巧用JavaScript将后端文件流轻松导出为Excel

2023-03-31 21:30:39

使用 JavaScript 将后台文件流导出为 Excel 并自定义文件名

简介

在软件开发中，经常需要将后台返回的文件流导出为 Excel 格式，以便进行数据分析或其他处理。本文将介绍如何使用 JavaScript 轻松实现此操作，并指导如何自定义下载文件名。

获取后端文件流

第一步是获取后端返回的文件流。这可以通过使用 XMLHttpRequest（XHR）对象发送请求来完成。

// 创建 XHR 对象
var xhr = new XMLHttpRequest();

// 打开请求
xhr.open('GET', 'path/to/excel_file', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/vnd.ms-excel');

// 监听请求状态变化
xhr.onreadystatechange = function() {
  // 请求完成
  if (xhr.readyState === 4) {
    // 获取文件流
    var fileStream = xhr.response;

    // 导出 Excel
    exportExcel(fileStream);
  }
};

// 发送请求
xhr.send();

导出 Excel 文件

获取文件流后，我们需要使用 FileSaver.js 库将其导出为 Excel。

// 导入 FileSaver.js 库
import { saveAs } from 'file-saver';

// 导出 Excel
exportExcel(fileStream) {
  // 创建 Blob 对象
  var blob = new Blob([fileStream], { type: 'application/vnd.ms-excel' });

  // 使用 FileSaver.js 导出 Blob 对象为 Excel 文件
  saveAs(blob, 'custom_file_name.xlsx');
}

自定义下载文件名

在导出 Excel 文件时，我们可以通过指定 saveAs() 方法的第二个参数来自定义下载文件名。

// 使用自定义文件名导出 Excel 文件
exportExcel(fileStream) {
  // 创建 Blob 对象
  var blob = new Blob([fileStream], { type: 'application/vnd.ms-excel' });

  // 使用自定义文件名导出 Blob 对象为 Excel 文件
  saveAs(blob, 'my_custom_file_name.xlsx');
}