xlsx-js-style导出Excel在Vercel生产环境损坏无法打开

我使用基于SheetJS分支的xlsx-js-style库结合file-saver实现Excel文件导出，本地开发环境运行正常，但部署到Vercel等生产环境后，下载的Excel文件无法打开，打开时提示文件损坏。

错误截图：

代码片段：

import { utils, WorkSheet, write } from "xlsx-js-style";
import { saveAs } from "file-saver";

const exportToCSV = () => {
  // 初始化工作簿
  const wb = utils.book_new();

  // 遍历数据，为每个对象创建工作表
  Object.keys(sObjectsWithDetailsData).forEach((key) => {
      if (!sObjectsWithDetailsData[key]) return;

      // 处理行数据
      const rows = sObjectsWithDetailsData[key]?.map((row) => ({
          "R/O": row.updateable ? "✓" : "☐",
          R: !row.nillable ? "*" : "",
          label: row.label ?? "",
          name: row.name ?? "",
          fieldDescription: row.fieldDescription ?? "",
          inlineHelpText: row.inlineHelpText ?? "",
          custom: row.custom ?? false,
          externalId: row.externalId ?? false,
          type: row.type ?? "",
          calculatedFormula: row.calculatedFormula ?? "",
          picklistValues:
              row.picklistValues
                  ?.map((picklist) => picklist.label)
                  .join("\n") ?? "",
      }));

      const ws = utils.json_to_sheet(rows ?? []);

      // 修改表头名称
      utils.sheet_add_aoa(
          ws,
          [
              [
                  "R/O",
                  "M",
                  "Label",
                  "API Name",
                  "Description",
                  "HelpText",
                  "Is Custom",
                  "Is External ID",
                  "Type",
                  "Formula Text",
                  "Picklist Values",
              ],
          ],
          {
              origin: "A1",
          }
      );

      utils.book_append_sheet(wb, ws, key);
  });

  // 执行导出
  const wbout = write(wb, { bookType: "xlsx", type: "binary" });
  saveAs(
      new Blob([s2ab(wbout)], { type: "application/octet-stream" }),
      "test.xlsx"
  );
};

解决方案 #

1. 补充s2ab函数实现 #

代码中调用了s2ab但未定义该函数，生产环境会因函数缺失导致Blob内容错误，添加以下二进制转换函数：

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}

2. 使用标准Excel MIME类型 #

将Blob的type改为xlsx文件对应的标准MIME类型，避免系统识别错误：

saveAs(
  new Blob([s2ab(wbout)], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }),
  "test.xlsx"
);

3. 改用arraybuffer类型导出（推荐） #

跳过二进制字符串转换步骤，直接使用arraybuffer类型生成文件，减少编码异常概率：

// 修改导出部分代码
const wbout = write(wb, { bookType: "xlsx", type: "arraybuffer" });
saveAs(
  new Blob([wbout], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }),
  "test.xlsx"
);

4. 检查生产环境打包配置 #

Vercel的打包工具可能对xlsx-js-style进行tree shaking，导致核心功能代码被误删，可修改导入方式为完整导入：

import * as XLSX from 'xlsx-js-style';
// 使用时替换为XLSX.utils、XLSX.write等

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