如何使用 JavaScript 实现纯前端读取和导出 excel 文件

使用JavaScript实现纯前端读取和导出Excel文件，主要依赖于一些前端库、HTML5 的新特性以及浏览器的API。具体来说，利用第三方库如 XLSX.js 用于解析和构建Excel文件、FileReader API 用于读取本地文件、以及Blob对象和URL.createObjectURL()方法用于生成并导出文件。在这其中，XLSX.js 库的使用尤为关键，它支持Excel文件的读取和写入，且API简单易用，能够让开发者轻松实现复杂的Excel处理功能。

一、引入 XLSX 库

第一步是在项目中引入XLSX.js库。XLSX是一个流行的前端库，用于解析和生成Excel文件(XLSX、XLS等格式)。它提供了一套丰富的API，可以在没有后端支持的情况下，直接在前端操作Excel文件。您可以通过npm安装、CDN引入或直接下载库文件到项目中来使用这个库。

引入库后，我们可以利用其API来实现Excel文件的读取和写入操作。例如，使用XLSX.read方法读取Excel文件内容，或使用XLSX.write方法输出Excel文件。

二、读取 Excel 文件

要在前端读取Excel文件，首先需要用到HTML的<input type="file">标签让用户选取本地文件。然后，使用FileReader API读取文件内容。FileReader API是HTML5新增的API，它可以异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用简单而且不需要服务器的参与。

1. 当用户选择文件后，创建一个FileReader实例，调用其readAsBinaryString方法读取文件。
2. 读取完成后，FileReader的onload事件会被触发。此时可以获取到文件内容，并使用XLSX库的XLSX.read方法将文件内容转化为JSON对象，以便后续处理。

三、展示和编辑 Excel 内容

在文件内容读取成功后，通常需要在前端显示读取的数据，并提供编辑功能。

1. 利用读取到的JSON对象，我们可以根据需求将数据渲染到网页上，例如使用表格显示Excel的每一行数据。
2. 对于编辑功能，可以实现一个简单的表单或直接在表格中编辑，编辑完成后，数据会回写到之前转化得到的JSON对象中。

四、导出 Excel 文件

导出Excel文件涉及到将修改后的数据转换为Excel文件，以及触发浏览器下载。

1. 使用XLSX库的XLSX.write方法，将JSON对象转换回Excel文件格式。这一步会产生一个代表Excel文件的二进制字符串或Blob对象。
2. 接下来，需要将这个Blob对象创建为一个URL，这可以通过URL.createObjectURL()实现。然后，创建一个隐藏的<a>标签，将href设置为这个URL，并模拟点击事件来触发下载。

通过上述步骤，开发者可以在不依赖任何服务器或后端逻辑的情况下，实现在纯前端环境中读取和导出Excel文件的功能。这种方式不仅可以提升用户体验，减少服务器压力，还能够提高数据处理的灵活性和速度。

相关问答FAQs：

1. 如何使用 JavaScript读取excel文件？

JavaScript可以通过使用第三方库（比如xlsx库）来读取excel文件。首先，引入库文件并创建一个FileReader对象，然后使用它来读取excel文件。接着使用库函数来解析excel数据，可以将其转换为JSON格式，方便后续的处理和展示。最后，根据需要，可以将读取到的数据进行展示或其他的处理。

2. 如何使用 JavaScript导出excel文件？

要在前端使用JavaScript导出excel文件，可以使用xlsx库或者其他支持导出excel的库。首先，将要导出的数据转换为符合excel格式的数据，可以是JSON或者其他的格式。然后，使用库提供的函数将数据转换为excel文件。最后，使用FileSaver或类似的工具将生成的excel文件保存到本地或者直接下载。

3. 有没有简洁的示例代码可以参考？

是的，以下是一段简单的JavaScript代码示例，展示了如何使用xlsx库读取和导出excel文件：

// 读取excel文件
var fileInput = document.getElementById('file-input'); // 获取文件输入框
fileInput.addEventListener('change', function(e) {
  var file = e.target.files[0]; // 获取选择的文件
  var reader = new FileReader(); // 创建FileReader对象
  reader.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, { type: 'array' }); // 使用xlsx库解析数据

    // 处理并展示数据，可以将数据转为JSON格式

    // 例如，将第一个sheet的数据转为JSON格式并展示
    var sheetName = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[sheetName];
    var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    console.log(jsonData);
  };
  reader.readAsArrayBuffer(file);
});

// 导出excel文件
var exportButton = document.getElementById('export-button'); // 获取导出按钮
exportButton.addEventListener('click', function() {
  var jsonData = [
    // 要导出的数据
  ];
  var worksheet = XLSX.utils.json_to_sheet(jsonData); // 将JSON数据转换为excel工作表
  var workbook = XLSX.utils.book_new(); // 创建工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 添加工作表
  XLSX.writeFile(workbook, 'data.xlsx'); // 导出为excel文件并保存到本地
});

请注意，在实际使用过程中需要根据需要进行适当的修改和扩展。