前端讀取excel

一、介紹

自從前后端分離后，現在兩者都能做的事，基本都轉移到前端了，前端的事情是越來越多了，不過前端的重要性也越來越高了^_^，不多說了，前端讀取excel，有一個類庫：sheetjs 非常強大

git倉庫：https://github.com/sheetjs/sheetjs

npm下載：https://www.npmjs.com/package/xlsx

 

npm install xlsx

import xlsx from 'xlsx';

 

讀取數據的方式

• XLSX.utils.sheet_to_csv()
• XLSX.utils.sheet_to_txt()
• XLSX.utils.sheet_to_html()
• XLSX.utils.sheet_to_json()
• XLSX.utils.sheet_to_formulae()

寫入數據的方式

• XLSX.write(wb, write_opts)
• XLSX.writeFile(wb, filename, write_opts)
• XLSX.writeFileAsync(filename, wb, o, cb)

 

二、讀取上傳的excel文件

excel表模板

 

 

 

 

 

 

 

三、加載並讀取遠程excel文件

 

var xhr = new XMLHttpRequest();
xhr.open('get', './data/foo.xlsx', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  if(xhr.status == 200) {
     var data = new Uint8Array(xhr.response)
     var workbook = XLSX.read(data, {type: 'array'});
     var sheets = workbook.Sheets,
     list = [];
   for (var sheet in sheets) {
      if (sheets.hasOwnProperty(sheet)) {
         list = list.concat(XLSX.utils.sheet_to_json(sheets[sheet]));
      }
   }
    console.log(list);
  }
};
xhr.send();