JavaScript操作XLSX文件的示例详解
前言
Excel 文件(通常以 .xlsx 为后缀)在各种业务场景中都有广泛应用,如数据分析、财务报告和其他数据表单处理。掌握如何在前端或后端使用 JavaScript 对这些 Excel 文件进行读取、创建和修改,能够显著提升我们的开发效率和数据处理能力。
本文将深入探讨如何使用强大的 xlsx 库来操作 Excel 文件。我们将涵盖如何在 Node.js 和浏览器环境中读取 Excel 文件、创建新的 Excel 文件、修改现有的 Excel 文件以及处理复杂的 Excel 数据结构。
常用操作
读取 Excel 文件
在 Node.js 环境中读取本地文件
在 Node.js 环境中,我们可以轻松地读取本地的 Excel 文件。以下示例展示了如何读取本地的 example.xlsx 文件并将其内容转换为 JSON 格式:
const XLSX = require('xlsx'); const workbook = XLSX.readFile('example.xlsx'); // 获取第一个工作表 const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; // 将工作表转换为 JSON 数据 const data = XLSX.utils.sheet_to_json(worksheet); console.log(data);
在浏览器环境中读取用户上传的文件
在浏览器环境中,处理用户上传的文件是常见需求。以下示例展示了如何结合 HTML 的
<input type="file"> 元素读取用户上传的 Excel 文件: <input type="file" id="upload" accept=".xlsx" /> <script> document.getElementById('upload').addEventListener('change', handleFile, false); function handleFile(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(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]; const jsonData = XLSX.utils.sheet_to_json(worksheet); console.log(jsonData); }; reader.readAsArrayBuffer(file); } </script>
创建 Excel 文件
创建并下载新的 Excel 文件是另一个常见需求。以下示例展示了如何生成包含示例数据的 Excel 文件,并允许用户下载:
<button id="download">下载 Excel 文件</button> <script> document.getElementById('download').addEventListener('click', function() { // 创建数据 const data = [ { "Name": "John", "Age": 30, "City": "New York" }, { "Name": "Peter", "Age": 25, "City": "London" }, { "Name": "Sara", "Age": 22, "City": "Paris" } ]; // 将数据转换为工作表 const worksheet = XLSX.utils.json_to_sheet(data); // 创建工作簿并添加工作表 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 生成 Excel 文件并下载 XLSX.writeFile(workbook, 'example.xlsx'); }); </script>
修改 Excel 文件
修改现有的 Excel 文件也是常见的操作需求。以下示例展示了如何读取 Excel 文件、修改某个单元格的值并保存修改后的文件:
const XLSX = require('xlsx'); const workbook = XLSX.readFile('example.xlsx'); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; // 修改单元格 A1 的值 worksheet['A1'].v = 'Modified Value'; // 保存修改后的文件 XLSX.writeFile(workbook, 'modified_example.xlsx');
进阶操作
1. 处理多个工作表
如果 Excel 文件包含多个工作表,我们可以遍历所有工作表并处理每个工作表的数据:
const XLSX = require('xlsx'); const workbook = XLSX.readFile('example.xlsx'); // 遍历所有工作表 workbook.SheetNames.forEach(sheetName => { const worksheet = workbook.Sheets[sheetName]; const data = XLSX.utils.sheet_to_json(worksheet); console.log(Sheet: ${sheetName}, data); });
2. 处理复杂的数据结构
处理嵌套的表格或进行数据清洗需要使用 JavaScript 的数组和对象方法:
const XLSX = require('xlsx'); const workbook = XLSX.readFile('complex_example.xlsx'); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; // 将工作表转换为 JSON 数据 const data = XLSX.utils.sheet_to_json(worksheet); // 清洗数据,去除空值并计算某一列的总和 const cleanedData = data.filter(row => row['Value'] !== null && row['Value'] !== undefined); const totalValue = cleanedData.reduce((sum, row) => sum + row['Value'], 0); console.log('Cleaned Data:', cleanedData); console.log('Total Value:', totalValue);
3. 指定单元格格式
const XLSX = require('xlsx'); const data = [ { "Date": new Date(), "Amount": 123.45 } ]; const worksheet = XLSX.utils.json_to_sheet(data); worksheet['A1'].z = 'mm/dd/yyyy'; // 指定日期格式 worksheet['B1'].z = '#,##0.00'; // 指定数字格式 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, 'formatted_example.xlsx');
4. 合并单元格
const XLSX = require('xlsx'); const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.aoa_to_sheet([ ['Title1', null, 'Title2'], ['Data1', 'Data2', 'Data3'] ]); // 合并单元格 A1 和 B1 worksheet['!merges'] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } // s 是开始单元格,e 是结束单元格 ]; XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, 'merged_cells_example.xlsx');
5. 设置单元格样式
虽然 xlsx 库本身对样式支持有限,但可以借助 exceljs 库来实现更丰富的样式设置:
const ExcelJS = require('exceljs'); const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet1'); worksheet.columns = [ { header: 'Name', key: 'name' }, { header: 'Age', key: 'age' }, { header: 'City', key: 'city' } ]; worksheet.addRow({ name: 'John', age: 30, city: 'New York' }); // 设置列宽和单元格样式 worksheet.getColumn('name').width = 20; worksheet.getRow(1).font = { bold: true }; worksheet.getCell('A2').fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFF0000' } }; workbook.xlsx.writeFile('styled_example.xlsx');
总结
本文详细介绍了如何使用 JavaScript 操作 XLSX 文件,涵盖读取、创建和修改文件的基本操作以及处理复杂数据和应用常用技巧。通过灵活运用 xlsx 库,开发者可以在前端和后端环境中高效地处理 Excel 文件,从而提升数据处理和分析的效率。
以上就是JavaScript操作XLSX文件的示例详解的详细内容,更多关于JavaScript操作XLSX的资料请关注脚本之家其它相关文章!
相关文章
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
这篇文章主要介绍了JS实现获取图片大小和预览的方法,结合完整实例形式分析了javascript针对不同浏览器处理图片上传与预览等操作的相关实现技巧,需要的朋友可以参考下2017-04-04JavaScript安全加密之禁止别人调试自己的前端页面代码实现
这篇文章主要为大家介绍了JavaScript安全加密之如何禁止别人调试自己的前端页面代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08js RuntimeObject() 获取ie里面自定义函数或者属性的集合
取得ie 里面 自定义函数或者属性的集合 使用RuntimeObject()实现,需要的朋友可以参考下。2010-11-11javascript之Partial Application学习
在数学中,一个函数是描述每个输入值对应唯一输出值的这种对应关系,符号为 f(x)。例如,表达式 f(x)=x2表示了一个函数 f,其中每个输入值x都与唯一输出值x2相联系2013-01-01
最新评论