js读取excel文件 | 易学教程

在做项目的时候，需要上传一些excel文件内容到服务器。但是，用户没有点击提交的时候，或者刷新到其他页面的时候，需要放弃本次操作。本来是想着用redis来做缓存，暂时存储。但由于用户未点击提交的情况比较负责，不太适合此场景。SO，推荐一个比较成熟的解决方案：js-xlsx。

话不多说，直接上代码：
1. 定义一个文件上传项：

<input type="file" id="excel-file">

下载js-xlsx的相应xlsx.core.min.js 文件后引入

$('#excel-file').change(function(e) {             var files = e.target.files;              var fileReader = new FileReader();             fileReader.onload = function(ev) {                 try {                     var data = ev.target.result,                         workbook = XLSX.read(data, {                             type: 'binary'                         }), // 以二进制流方式读取得到整份excel表格对象                         persons = []; // 存储获取到的数据                 } catch (e) {                     console.log('文件类型不正确');                     return;                 }                  // 表格的表格范围，可用于判断表头是否数量是否正确                 var fromTo = '';                 // 遍历每张表读取                 for (var sheet in workbook.Sheets) {                     if (workbook.Sheets.hasOwnProperty(sheet)) {                         fromTo = workbook.Sheets[sheet]['!ref'];                         console.log(fromTo);                         persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));                         // break; // 如果只取第一张表，就取消注释这行                     }                 }                  console.log(persons);             };              // 以二进制方式打开文件             fileReader.readAsBinaryString(files[0]);         });

PS：这个是正常使用jquery解决的。But，我的就比较坑了，项目用的是angularjs 2，导致我有调试了半天，很坑，记录一下：
1. 定义一个文件上传项：

<input ng-model="agentIds" type="file" style="margin-left: 480px;" id="excel-file" onchange="angular.element(this).scope().readExcel(this.files)" >

下载js-xlsx的相应xlsx.core.min.js 文件后引入

// 读取excel内容     $scope.readExcel = function(e) {         var files = e;         console.log(e);           var fileReader = new FileReader();         fileReader.onload = function(ev) {             try {                 var data = ev.target.result,                     workbook = XLSX.read(data, {                         type: 'binary'                     }), // 以二进制流方式读取得到整份excel表格对象                     persons = []; // 存储获取到的数据             } catch (e) {                 console.log('文件类型不正确');                 return;             }              // 表格的表格范围，可用于判断表头是否数量是否正确             var fromTo = '';              // 遍历每张表读取             for (var sheet in workbook.Sheets) {                 if (workbook.Sheets.hasOwnProperty(sheet)) {                     fromTo = workbook.Sheets[sheet]['!ref'];                     console.log(fromTo);                     persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));                     // break; // 如果只取第一张表，就取消注释这行                 }             }             // 定义自己需要的返回值             var res = "";             for(var i = 0; i < persons.length; i++) {                 res += persons[i].agentId + ",";             }             if(res.endWith(",")) {                 res = res.substr(0, res.length-1);             }              $scope.agentIds = res;             console.log("------>"+ $scope.agentIds);          };          String.prototype.endWith=function(endStr){             var d=this.length-endStr.length;             return (d>=0&&this.lastIndexOf(endStr)==d)         }          // 以二进制方式打开文件         fileReader.readAsBinaryString(files[0]);     }

官方地址：https://github.com/SheetJS/js-xlsx

最后，推荐一篇博客，对我帮助很大：前端读取Excel报表文件

文章来源: js读取excel文件

标签

filereader

var

js-xlsx