React.js中移除Excel下载后的单元格绿色警告

问题描述 #

下载Excel文件后，单元格中出现绿色警告，需要移除。当前使用的前端下载代码如下：

ApiGet("API")
  .then(async (res) => {
    // 获取文件URL
    const fileUrl = res.data.data;
    console.log('fileUrl', fileUrl);
    try {
      const response = await fetch(fileUrl);

      const blob = await response.blob();

      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = `${val?.data?.['Short Name']} ${nameHeader}`;

      link.click();

      setLoader(false);
    } catch (error) {
      console.error('Error downloading file:', error);
      setLoader(false);
    }
});

尝试多种方法未解决，求移除该警告的实现方案。

解决方案 #

这个绿色警告大多是数字以文本形式存储导致的，有两种可行解决方向：

1. 后端生成Excel时处理（推荐） #

如果Excel是后端接口生成的，直接在后端设置对应单元格格式为数值类型，从源头避免警告。比如用Python的openpyxl、Java的POI这类库时，指定单元格为数字格式，而非将数字作为文本写入。

2. 前端下载后修改Excel格式 #

如果只能在前端处理，可借助xlsx库解析文件、修改单元格格式后重新生成Blob下载：

步骤：

• 安装依赖：npm install xlsx
• 修改下载代码：

import XLSX from 'xlsx';

ApiGet("API")
  .then(async (res) => {
    const fileUrl = res.data.data;
    console.log('fileUrl', fileUrl);
    try {
      const response = await fetch(fileUrl);
      const arrayBuffer = await response.arrayBuffer();
      
      // 解析Excel文件
      const workbook = XLSX.read(arrayBuffer, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];

      // 遍历单元格，将文本格式的数字转为数值
      Object.keys(worksheet).forEach(cellKey => {
        // 跳过非单元格字段（如!ref、!merges等）
        if (!cellKey.startsWith('!')) {
          const cell = worksheet[cellKey];
          // 判断单元格为文本类型且内容是有效数字
          if (cell.t === 's' && !isNaN(Number(cell.v))) {
            // 转为数值类型
            cell.t = 'n';
            cell.v = Number(cell.v);
          }
        }
      });

      // 重新生成Excel文件的ArrayBuffer
      const newArrayBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([newArrayBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = `${val?.data?.['Short Name']} ${nameHeader}`;
      link.click();

      setLoader(false);
    } catch (error) {
      console.error('Error downloading file:', error);
      setLoader(false);
    }
});

注意：如果警告是其他类型（如公式错误、数据验证警告），需根据具体警告类型调整处理逻辑，上述代码针对最常见的“文本存储数字”场景。

内容的提问来源于stack exchange，提问作者Bobby