AngularJS之前端解析excel文件
阿新 • • 發佈:2019-01-19
load lan 文件 .com 數據解析 http imp style 頁面
之前發現一款比較強大的js解析excel插件SheetJS js-xlsx,一直未投入到生產中使用。最近有批量導入的需求,大致看了下文檔,使用比較方便快捷,容易上手,現在以AngularJS為例,介紹下其基本使用:
1、下載核心js文件xlsx.full.min.js,通過script標簽引入到項目中
github地址:https://github.com/sheetjs/js-xlsx
2、編寫自定義指令
1 xxx.directive(‘importSheet‘, function () { 2 return { 3 scope: {opts: ‘=‘}, 4 link: function($scope, $element, $attr) { 5 /** 6 * exp:<input type="file" name="uploadExcel" data-sheetname="批量導入" import-sheet multiple="false" /> 7 */ 8 //表格所在sheet頁名稱 9 var sheetName = $attr.sheetname; 10 $scope.dataList = []; 11 $element.on(‘change‘, function(changeEvent) { 12 var reader = new FileReader(); 13 reader.onload = function (e) { 14 var bstr = e.target.result; 15 var workbook = XLSX.read(bstr, {type: ‘binary‘}); 16 console.log(‘workbook‘, workbook) 17 //將原始excel數據解析成json 18 vardataList = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]); 19 console.log(‘dataList‘, dataList); 20 }; 21 reader.readAsBinaryString(changeEvent.target.files[0]); 22 }) 23 } 24 } 25 })
3、在頁面中使用此自定義指令,導入後的結果如下:
原始數據:
json格式的數據:
同時,xlsx自帶很多工具方法,可以根據實際業務需求酌情考慮:
AngularJS之前端解析excel文件