前端操作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，可以提高开发效率和用户体验。
