基本介绍

实现前端对Excel文件的解析

一、安装及基本使用

1、安装

github地址：https://github.com/SheetJS/sheetjs

$ npm install xlsx

2、代码内使用

import XLSX from 'xlsx'

二、文件读取处理

1、表头处理

从Excel中读取表头信息

function get_header_row(sheet) { const headers = []; /* sheet['!ref']表示所有单元格的范围，例如从A1到F8则记录为 A1:F8*/ const range = XLSX.utils.decode_range(sheet['!ref']); let C, R = range.s.r; /* 从第一行开始 */ /* 按列进行数据遍历 */ for (C = range.s.c; C <= range.e.c; ++C) { /* 查找第一行中的单元格 */ const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})] let hdr = "UNKNOWN " + C; // <-- 进行默认值设置 if (cell && cell.t) hdr = XLSX.utils.format_cell(cell); headers.push(hdr); } return headers; }

2、文件数据处理

使用Element-ui的Uploader进行文件上传，在change事件时触发processFile函数，入参file和fileList为Uploader组件传递的参数

processFile(file, fileList) { const reader = new FileReader(); reader.onload = (e) => { /* 解析数据 */ const bstr = e.target.result; const wb = XLSX.read(bstr, {type: 'binary'}); /* 获取文件的第一个工作表（WorkSheet） */ const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; /* 数组转换 */ const data = XLSX.utils.sheet_to_json(ws, {header: 1}); /* 进行表格数据更新 */ this.tableData = data; /* 进行表格表头数据更新 */ this.cols = getHeaderRow(ws); }; reader.readAsBinaryString(file.raw); }

三、实现效果

相关参考

js-xlsx 介绍：https://www.cnblogs.com/ajaemp/p/12880847.html

Get the header column from excel：https://github.com/SheetJS/sheetjs/issues/214