在前端开发中,可能会遇到前端如何读取Excel文件的数据的需求,(省略一千字。。。)。废话少说,直接上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <script src="js/xlsx.core.min.js"></script> <title>上传excel文件并读取数据</title> </head> <body> <input type="file" id="file"> <div id="container" style=" 400px; height: 400px;"></div> <script> $('#file').change(function (e) { var files = e.target.files; var fileReader = new FileReader(); // 将文件内容读入内存 fileReader.onload = function (ev) { // 当读取操作成功完成时调用 // console.log(this.result); // 查看文件输出内容 try { var data = ev.target.result, //以二进制流方式读取得到表格中数据 workbook = XLSX.read(data, { type: 'binary' }), info = [];//存储获取到的数据 } catch (e) { alert('文件类型不正确'); return; } var fromTo = ''; //遍历每张表读取 for (var sheet in workbook.Sheets) { if (workbook.Sheets.hasOwnProperty(sheet)) { fromTo = workbook.Sheets[sheet]['!ref']; info = info.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); } } }; //以二进制方式打开文件 fileReader.readAsBinaryString(files[0]); }); </script> </body> </html>
说明:
1. jquery.js的下载地址:http://www.bootcdn.cn/jquery/
2. xlsx.core.min.js的下载地址:https://github.com/SheetJS/js-xlsx/tree/master/dist