JavaScript纯前端解析Excel文件

        最近在开发时候遇到了这样的一个需求&＃xff1a;需要在前端通过解析Excel将Excel中的值进行回传填入。我想在实际的开发过程中&＃xff0c;肯定大家也会遇到这样的需求&＃xff0c;在这介绍一个比较不错的JS工具库&＃xff1a;js-xlsx&＃xff0c;及该库的简单使用方法。

        js-xlsx是由SheetJs出品的纯JS即可实现读取和导出Excel的工具库&＃xff0c;功能强大&＃xff0c;使用方便&＃xff0c;支持格式多&＃xff0c;官方Git地址&＃xff1a; https://github.com/SheetJS/js-xlsx

1.1、兼容性

1.2 使用方式

        支持直接使用标签进行引用&＃xff1a;

         也支持CDN引用&＃xff1a;

        使用npm安装

$ npm install xlsx

        使用bower安装

$ bower install js-xlsx
2、读取excle文件

        读取excel主要是通过XLSX.read(data, {type: type});方法来实现&＃xff0c;返回一个叫WorkBook的对象&＃xff0c;type主要取值如下&＃xff1a;

• base64: 以base64方式读取&＃xff1b;
• binary: BinaryString格式(byte n is data.charCodeAt(n))
• string: UTF8编码的字符串&＃xff1b;
• buffer: nodejs Buffer&＃xff1b;
• array: Uint8Array&＃xff0c;8位无符号数组&＃xff1b;
• file: 文件的路径&＃xff08;仅nodejs下支持&＃xff09;&＃xff1b;

 2.1 读取本地文件

// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {var reader &＃61; new FileReader();reader.readAsBinaryString(file);reader.onload &＃61; function(e) {var data &＃61; e.target.result;var workbook &＃61; XLSX.read(data, {type: &＃39;binary&＃39;});if(callback) callback(workbook);};
}

2.2 读取workbook

        不处理合并单元格

function readWorkbook(workbook) {var sheetContent &＃61; []// 遍历每张表读取for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {fromTo &＃61; workbook.Sheets[sheet][&＃39;!ref&＃39;];sheetContent.push(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))// break; // 如果只取第一张表&＃xff0c;就取消注释这行}}return sheetContent
}

        处理合并单元格

// 读取 excel文件
function outputWorkbook(workbook) {var sheetNames &＃61; workbook.SheetNames; // 工作表名称集合sheetNames.forEach(name &＃61;> {var worksheet &＃61; workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表for(var key in worksheet) {// v是读取单元格的原始值console.log(key, key[0] &＃61;&＃61;&＃61; &＃39;!&＃39; ? worksheet[key] : worksheet[key].v);}});
}


        根据!ref确定excel的范围&＃xff0c;再根据!merges确定单元格合并&＃xff08;如果有&＃xff09;&＃xff0c;最后输出整个table&＃xff0c;比较麻烦&＃xff0c;幸运的是&＃xff0c;插件自身已经写好工具类XLSX.utils给我们直接使用&＃xff0c;无需我们自己遍历&＃xff0c;工具类输出主要包括如下&＃xff1a;

        有些不常用&＃xff0c;常用的主要是&＃xff1a;

•  XLSX.utils.sheet_to_csv&＃xff1a;生成CSV格式
• XLSX.utils.sheet_to_txt&＃xff1a;生成纯文本格式
• XLSX.utils.sheet_to_html&＃xff1a;生成HTML格式
• XLSX.utils.sheet_to_json&＃xff1a;输出JSON格式

3.1 手写代码实现

// 将一个sheet转成最终的excel文件的blob对象&＃xff0c;然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {sheetName &＃61; sheetName || &＃39;sheet1&＃39;;var workbook &＃61; {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] &＃61; sheet;// 生成excel的配置项var wopts &＃61; {bookType: &＃39;xlsx&＃39;, // 要生成的文件类型bookSST: false, // 是否生成Shared String Table&＃xff0c;官方解释是&＃xff0c;如果开启生成速度会下降&＃xff0c;但在低版本IOS设备上有更好的兼容性type: &＃39;binary&＃39;};var wbout &＃61; XLSX.write(workbook, wopts);var blob &＃61; new Blob([s2ab(wbout)], {type:"application/octet-stream"});// 字符串转ArrayBufferfunction s2ab(s) {var buf &＃61; new ArrayBuffer(s.length);var view &＃61; new Uint8Array(buf);for (var i&＃61;0; i!&＃61;s.length; &＃43;&＃43;i) view[i] &＃61; s.charCodeAt(i) & 0xFF;return buf;}return blob;
}

3.2 利用官方工具类

        其实上面这些代码都不需要我们手写&＃xff0c;官方已经提供好了现成的工具类给我们使用&＃xff0c;主要包括&＃xff1a;

• aoa_to_sheet: 这个工具类最强大也最实用了&＃xff0c;将一个二维数组转成sheet&＃xff0c;会自动处理number、string、boolean、date等类型数据&＃xff1b;
• table_to_sheet: 将一个table dom直接转成sheet&＃xff0c;会自动识别colspan和rowspan并将其转成对应的单元格合并&＃xff1b;
• json_to_sheet: 将一个由对象组成的数组转成sheet&＃xff1b;

 3.3 处理单元格合并

var aoa &＃61; [[&＃39;主要信息&＃39;, null, null, &＃39;其它信息&＃39;], // 特别注意合并的地方后面预留2个null[&＃39;姓名&＃39;, &＃39;性别&＃39;, &＃39;年龄&＃39;, &＃39;注册时间&＃39;],[&＃39;张三&＃39;, &＃39;男&＃39;, 18, new Date()],[&＃39;李四&＃39;, &＃39;女&＃39;, 22, new Date()]
];
var sheet &＃61; XLSX.utils.aoa_to_sheet(aoa);
sheet[&＃39;!merges&＃39;] &＃61; [// 设置A1-C1的单元格合并{s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
openDownloadDialog(sheet2blob(sheet), &＃39;单元格合并示例.xlsx&＃39;);
4、样例 

        最后&＃xff0c;上一段直接读取本地文件后返回Json格式的代码&＃xff0c;方便进行参考

//读取本地Excel表格
function readWorkbookFromLocalFile(files) {var fileReader &＃61; new FileReader()fileReader.readAsBinaryString(files[0])return new Promise(function(resolve, reject) {fileReader.onload &＃61; function (ev) {try {var data &＃61; ev.target.resultvar workbook &＃61; XLSX.read(data, {type: &＃39;binary&＃39;}) // 以二进制流方式读取得到整份excel表格对象var fromTo &＃61; &＃39;&＃39;;var sheetContent &＃61; []// 遍历每张表读取for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {fromTo &＃61; workbook.Sheets[sheet][&＃39;!ref&＃39;];sheetContent.push(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))// break; // 如果只取第一张表&＃xff0c;就取消注释这行}}respondBody &＃61; {code: 100,msg: &＃39;文件解析成功&＃39;,body: sheetContent}resolve(respondBody)} catch (e) {respondBody &＃61; {code: 500,msg: &＃39;文件类型不正确&＃39;,body: &＃39;&＃39;}reject(respondBody)}}})
}

tips&＃xff1a;多看书&＃xff0c;多总结&＃xff0c;少写代码&＃xff01;