React+Vite+TypeScript中获取本地Excel模板并处理的问题

错误原因分析 #

• 第一个错误：Excel本质是二进制压缩文件（开头标识为PK），用res.json()尝试将其解析为JSON格式，必然触发语法错误。
• 第二个错误：xlsx.readFile()是Node.js环境API，用于读取本地文件系统路径，浏览器环境无法直接使用，需改用浏览器兼容的xlsx.read()处理二进制数据。

正确实现步骤 #

1. 先安装xlsx库：

npm install xlsx

2. 读取public目录下的Excel模板并解析为工作簿：

import * as XLSX from 'xlsx';

async function getExcelTemplate(): Promise<XLSX.WorkBook> {
  // Vite中public目录资源直接通过根路径访问，无需../public前缀
  const response = await fetch('/Template.xlsx');
  // 获取二进制数据的ArrayBuffer
  const arrayBuffer = await response.arrayBuffer();
  // 转换为Uint8Array后传入xlsx.read解析
  const workbook = XLSX.read(new Uint8Array(arrayBuffer), { type: 'array' });
  return workbook;
}

3. 填充表单数据到模板并生成下载示例：

async function fillAndDownloadTemplate(formData: Record<string, any>) {
  const workbook = await getExcelTemplate();
  // 获取第一个工作表（根据你的模板结构调整）
  const worksheet = workbook.Sheets[workbook.SheetNames[0]];

  // 示例：填充A1单元格为表单姓名
  worksheet['A1'].v = formData.name;
  // 填充B2单元格为表单邮箱
  worksheet['B2'].v = formData.email;

  // 生成Excel文件并触发下载
  XLSX.writeFile(workbook, '填充后的表格.xlsx');
}

关键注意点 #

• Vite的public目录资源访问路径：直接用/文件名即可，Vite会自动将public下的资源部署到构建产物根目录。
• 处理Excel必须用arrayBuffer()而非json()或text()，否则会破坏文件结构。
• 复杂数据填充可先用XLSX.utils.sheet_to_json()将工作表转为JSON对象修改，再用XLSX.utils.json_to_sheet()转回工作表，更易维护。

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