使用xlsx包读取Excel文件时报fs模块不存在错误如何解决

• fs是Node.js原生的服务端文件操作模块，浏览器运行环境根本不提供这个API，在前端浏览器侧代码中调用依赖fs的方法必然会报错。
• xlsx包的readFile方法本身是为Node.js服务端环境设计的，仅支持在服务端调用，前端浏览器场景下不能使用该方法读取文件。
• 你安装的@types/node只是TypeScript的类型声明包，不会提供实际运行的fs模块能力，webpack打包前端代码时默认也不会打包Node.js原生模块，因此会抛出Module not found: Error: Can't resolve 'fs'的错误。

场景1：读取用户本地自行选择的Excel文件 #

不要使用readFile方法，改为监听文件选择控件的change事件，用FileReader读取用户选中的文件内容，再传给xlsx的read方法解析即可，示例代码如下：

<!-- 页面中添加文件选择控件 -->
<input type="file" id="excelFile" accept=".xlsx,.xls">

import XLSX from 'xlsx'

document.getElementById('excelFile').addEventListener('change', (e) => {
  const file = e.target.files[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = function(e) {
    const data = e.target.result
    const workbook = XLSX.read(data, { type: 'binary' })
    // 此处添加后续处理workbook的业务逻辑
  }
  reader.readAsBinaryString(file)
})

场景2：读取项目内预置的固定Excel文件 #

你需要先调整webpack配置，使其支持打包xlsx类型的文件，将文件转为资源路径引入后，再通过网络请求拉取文件内容解析：

1. webpack5内置了资源模块无需额外安装依赖，直接修改webpack配置，添加xlsx文件的处理规则：

// 在webpack.config.js的module.rules数组中添加规则
{
  test: /\.xlsx$/,
  type: 'asset/resource',
}

如果是webpack4及更低版本，需要先安装file-loader，再配置如下规则：

{
  test: /\.xlsx$/,
  use: ['file-loader'],
}

2. 代码改为引入文件+fetch读取的方式：

import XLSX from 'xlsx'
import excelUrl from './file.xlsx'

// 点击按钮触发的读取逻辑
async function readExcel() {
  const res = await fetch(excelUrl)
  const blob = await res.blob()
  const arrayBuffer = await blob.arrayBuffer()
  const workbook = XLSX.read(arrayBuffer, { type: 'array' })
  // 此处添加后续处理workbook的业务逻辑
}

额外兼容配置 #

如果打包阶段依旧提示找不到fs模块，在webpack配置中添加如下规则，告知webpack忽略fs等Node原生模块的打包即可：

// 在webpack.config.js的根节点添加配置
resolve: {
  fallback: {
    fs: false,
    path: false,
    crypto: false
  }
}

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