在浏览器中使用 XLSX.readFile 读取文件

Question

在 Typescript 中，执行时出现错误“无法读取未定义的属性‘替换’”：

const xlsx = XLSX.readFile(fileName);

filename 是现有文件的路径；我读过“readFile仅在服务器环境中可用。浏览器没有用于读取给定路径的任意文件的API，因此必须使用另一种策略。” 我该怎么办？

编辑：我试图读取的文件是 xlsx；它已压缩：该库是否有错误？我正在运行 [电子邮件受保护]

Answer 1

在 xlsx 中读取文件既简单又灵活，您可以将数据存储在 db 或 json 文件中，以便稍后渲染数据

 <input
        type="file"
        onChange={e => {
          const file = e.target.files[0]
          readExcel(file)
        }}
/>

现在上传文件时读取文件

const readExcel = async (file: any) => {
    const fileReader = await new FileReader()
    fileReader.readAsArrayBuffer(file)

    fileReader.onload = (e: any) => {
      const bufferArray = e?.target.result
      const wb = XLSX.read(bufferArray, { type: "buffer" })
      const wsname = wb.SheetNames[0]
      const ws = wb.Sheets[wsname]

      const data = XLSX.utils.sheet_to_json(ws)
      const fileName = file.name.split(".")[0]

      console.log(data)
    }

github 仓库

Answer 2

• NodeJS API 允许您使用文件系统 API。
• 浏览器 API 允许您从服务器获取任何类型的数据。

所以基本上你需要将文件放在某个服务器上（本地或远程），然后使用

XLSX.read(data, options)

获取并读取它

fetch('http://localhost:8080/public/filename.ext')
   .then(response => response.arrayBuffer())
   .then(buffer => {
         const xlsx = XLSX.read(new Uint8Array(data, {type: 'array'}));
         // process data here
         ...
    })
    .catch(err => console.error(err));

另一种方式，如果您不想将文件托管在服务器上，您可以尝试FileReader API，这有点复杂。

您可以在本文中阅读有关 FileReader 和 File 的信息：“使用文件 API 在 JavaScript 中读取文件”