用于打开 Excel 文件并读取内容的 JavaScript 代码

在前端开发中，许多时候需要读取 Excel 文件中的数据并将其展示到网页上。本文将向你介绍一些用于打开 Excel 文件并读取其中内容的 JavaScript 代码，帮助你完成这一任务。

前置条件

在使用 JavaScript 读取 Excel 文件之前，你需要先了解以下基本知识：

1. Excel 数据文件通常有两种格式：.xls 和 .xlsx。前者是旧版 Excel 数据格式，后者是新版 Excel 数据格式。

2. 在使用 JavaScript 读取 Excel 文件之前，你需要使用 file input 元素让用户选择所需的 Excel 文件。例如：

   <input type="file" id="excel-file" onchange="uploadExcel()" accept=".xls,.xlsx">
   

3. JavaScript 代码需要使用第三方库 SheetJS 来处理 Excel 文件。你可以在 SheetJS 官网 上下载相应的库文件。

读取 Excel 文件

读取 Excel 文件的过程大致可以分为以下几个步骤：

1. 获取用户上传的 Excel 文件。

   const excelFile = document.getElementById('excel-file').files[0];
   

2. 使用 FileReader 对象将 Excel 文件读取为二进制格式。

   const reader = new FileReader();
   reader.readAsBinaryString(excelFile);
   

3. 将读取到的二进制数据转为 SheetJS 库所需的 ArrayBuffer 格式。

   const binaryData = reader.result;
   const data = new Uint8Array(binaryData.length);
   for (let i = 0; i < binaryData.length; i++) {
     data[i] = binaryData.charCodeAt(i) & 0xff;
   }
   const workbook = XLSX.read(data, { type: 'array' });
   

4. 使用 SheetJS 库的 XLSX.utils.sheet_to_json 方法将 Excel 文件中的工作表转为 JSON 格式。

   const sheetName = workbook.SheetNames[0];
   const worksheet = workbook.Sheets[sheetName];
   const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
   

完整代码如下：

function uploadExcel() {
  const excelFile = document.getElementById('excel-file').files[0];
  const reader = new FileReader();
  reader.readAsBinaryString(excelFile);
  reader.onload = () => {
    const binaryData = reader.result;
    const data = new Uint8Array(binaryData.length);
    for (let i = 0; i < binaryData.length; i++) {
      data[i] = binaryData.charCodeAt(i) & 0xff;
    }
    const workbook = XLSX.read(data, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    console.log(excelData);
  };
}

注意事项

1. SheetJS 库只能在浏览器环境下使用。

2. 读取 Excel 文件可能会因为网络问题、文件大小、Excel 文件格式等原因出现问题，需要进行相关异常处理。

以上就是使用 JavaScript 读取 Excel 文件的基本方法，希望本文对你有所帮助！