1. 程式人生 > >AngularJS之前端解析excel文件

AngularJS之前端解析excel文件

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 var
dataList = 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文件