前端大佬必备！JS操作Excel的5个硬核技巧分享

前端操作Excel文件，是Web开发中常见的需求。本文将深入探讨如何利用JavaScript库，如SheetJS、exceljs和handsontable等，在前端实现Excel文件的解析、修改与生成，从而提升Web应用的数据处理能力。文章将介绍五大硬核技巧，包括：使用SheetJS读取Excel文件并转换为JSON格式；利用exceljs创建Excel文件并设置样式；在前端修改Excel文件内容并重新生成下载；采用流式API处理大型Excel文件以降低内存占用；以及处理Excel中的公式和样式，例如读取公式计算结果和设置单元格字体颜色等。掌握这些技巧，开发者能够高效地完成前端对Excel文件的各种操作，为用户提供更强大的数据处理功能。

前端操作Excel文件需借助JavaScript库实现，核心方法包括使用SheetJS、exceljs和handsontable等工具。首先，使用SheetJS读取Excel文件时，通过FileReader API读取文件并用XLSX.read解析数据，再利用sheet_to_json将表格转为JSON格式；其次，使用exceljs创建Excel文件时，通过Workbook对象添加工作表、设置列头和行数据，并调用writeBuffer生成文件流用于下载；第三，在前端修改Excel文件时，先读取文件内容，修改指定单元格后重新生成并下载新文件；第四，处理大型Excel文件可采用流式API，如SheetJS的流式读取与exceljs的流式写入，有效降低内存占用；第五，处理公式和样式方面，SheetJS支持读取公式计算结果，exceljs提供丰富API设置字体、颜色等样式。这些方法能够高效完成前端对Excel文件的解析、修改与生成操作。

前端操作Excel文件，核心在于利用JavaScript库来解析、修改和生成Excel文件。以下是一些实用的技巧和方法，帮助你更好地在前端处理Excel数据。

使用JavaScript操作Excel，通常会借助一些成熟的库，例如：SheetJS（js-xlsx）、exceljs、handsontable等。这些库提供了丰富的功能，可以读取、写入、修改Excel文件，甚至可以进行更复杂的操作，如公式计算、样式设置等。

SheetJS (js-xlsx)

SheetJS 是一个非常流行的库，它支持多种Excel文件格式，并且具有良好的性能。

exceljs

exceljs 是另一个强大的库，它提供了更面向对象的API，使得操作Excel文件更加方便。

Handsontable

Handsontable 是一个数据网格编辑器，它可以嵌入到你的Web应用中，让用户直接在浏览器中编辑Excel数据。

如何使用SheetJS读取Excel文件？

SheetJS 允许你读取本地或远程的Excel文件。你需要先引入 SheetJS 库，然后使用 FileReader API 读取文件内容，并使用 XLSX.read 方法解析数据。

// HTML
<input type="file" id="excelFile" />

// JavaScript
const excelFile = document.getElementById('excelFile');

excelFile.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });

    // 处理Excel数据
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet);

    console.log(jsonData); // 输出JSON格式的数据
  };

  reader.readAsArrayBuffer(file);
});

这个例子展示了如何读取Excel文件，并将数据转换为JSON格式，方便你在前端进行处理。需要注意的是，XLSX.utils.sheet_to_json 方法会将Excel表格的第一行作为JSON对象的键。

如何使用exceljs创建和写入Excel文件？

exceljs 提供了更简洁的 API 来创建和写入 Excel 文件。

const ExcelJS = require('exceljs');

async function createExcel() {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('My Sheet');

  // 添加数据
  worksheet.columns = [
    { header: 'Id', key: 'id', width: 10 },
    { header: 'Name', key: 'name', width: 32 },
    { header: 'Birthday', key: 'birthday', width: 10, style: { numFmt: 'yyyy-mm-dd' } }
  ];

  worksheet.addRow({id: 1, name: 'John Doe', birthday: new Date(1970,1,1)});
  worksheet.addRow({id: 2, name: 'Jane Doe', birthday: new Date(1965,1,7)});

  // 生成文件
  const buffer = await workbook.xlsx.writeBuffer();
  // 下载文件 (需要 FileSaver.js)
  saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'myexcel.xlsx');
}

createExcel();

这段代码演示了如何创建一个新的 Excel 文件，添加列头和数据，并将文件保存到本地。你需要使用 FileSaver.js 库来实现文件下载功能。

如何在前端修改Excel文件？

修改 Excel 文件通常涉及读取文件、修改数据和保存文件三个步骤。你可以使用 SheetJS 或 exceljs 来实现这些操作。

// 使用 SheetJS 修改 Excel 文件
function modifyExcel(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });

    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];

    // 修改数据 (例如，修改第一个单元格的值)
    worksheet['A1'].v = 'New Value';

    // 生成新的 Excel 文件
    const newWorkbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(newWorkbook, worksheet, sheetName);
    const newFile = XLSX.write(newWorkbook, { bookType: 'xlsx', type: 'array' });

    // 下载文件
    saveAs(new Blob([newFile], { type: 'application/octet-stream' }), 'modified.xlsx');
  };
  reader.readAsArrayBuffer(file);
}

这段代码展示了如何使用 SheetJS 修改 Excel 文件中的数据，并将修改后的文件保存到本地。注意，你需要使用 saveAs 函数（来自 FileSaver.js）来触发文件下载。

如何处理大型Excel文件？

处理大型 Excel 文件时，性能是一个关键问题。SheetJS 和 exceljs 都提供了流式读取和写入的 API，可以有效地处理大型文件。

SheetJS 流式读取

// 使用 SheetJS 流式读取
function processLargeExcel(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array', sheetStubs: true });

    workbook.SheetNames.forEach(sheetName => {
      const worksheet = workbook.Sheets[sheetName];
      const range = XLSX.utils.decode_range(worksheet['!ref']);

      for (let rowNum = range.s.r; rowNum <= range.e.r; rowNum++) {
        for (let colNum = range.s.c; colNum <= range.e.c; colNum++) {
          const cellAddress = XLSX.utils.encode_cell({ r: rowNum, c: colNum });
          const cell = worksheet[cellAddress];

          if (cell) {
            // 处理单元格数据
            console.log(cell.v);
          }
        }
      }
    });
  };
  reader.readAsArrayBuffer(file);
}

exceljs 流式写入

const ExcelJS = require('exceljs');

async function streamWriteExcel() {
  const workbook = new ExcelJS.stream.xlsx.WorkbookWriter({
    filename: 'streamed.xlsx'
  });
  const worksheet = workbook.addWorksheet('My Sheet');

  worksheet.columns = [
    { header: 'Id', key: 'id', width: 10 },
    { header: 'Name', key: 'name', width: 32 },
    { header: 'Birthday', key: 'birthday', width: 10, style: { numFmt: 'yyyy-mm-dd' } }
  ];

  for (let i = 0; i < 10000; i++) {
    worksheet.addRow({id: i, name: `User ${i}`, birthday: new Date(1990, 0, 1)});
  }

  await workbook.commit();
}

streamWriteExcel();

使用流式 API 可以显著降低内存占用，提高处理大型文件的效率。

如何处理Excel中的公式和样式？

SheetJS 和 exceljs 都支持处理 Excel 文件中的公式和样式。

SheetJS 公式

SheetJS 可以读取和计算 Excel 文件中的公式。

const workbook = XLSX.readFile('file.xlsx');
const worksheet = workbook.Sheets['Sheet1'];

// 获取公式结果
const formulaResult = worksheet['A1'].v; // 如果 A1 单元格包含公式，则返回计算结果

exceljs 样式

exceljs 提供了丰富的 API 来设置单元格样式。

worksheet.getCell('A1').style = {
  font: {
    name: 'Arial Black',
    size: 12,
    bold: true
  },
  fill: {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: 'FFFF0000' }
  }
};

这段代码演示了如何使用 exceljs 设置单元格的字体和填充颜色。

这些技巧可以帮助你在前端更好地操作 Excel 文件。选择合适的库和 API，可以提高开发效率和用户体验。

文中关于文件处理,JavaScript库,前端Excel操作,SheetJS,exceljs的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《前端大佬必备！JS操作Excel的5个硬核技巧分享》文章吧，也可关注golang学习网公众号了解相关技术文章。