使用SheetJS實現純前端導出Excel數據

因爲同過後端懶得處理導出Excel，我又打不過他只好本身想辦法用純前端導出Excel咯，在這裏友好的問候那個懶惰的同事——垃圾、狗屎、shit、rubbish(關係很好，平常問候)，呼~爽！！！

好言歸正傳，查了一些資料，最後選擇SheetJS好像又叫js-xlsx，無論他叫啥好用就行,貼個官網開始搞搞~ SheetJS官網

• 首先咱們引入這個腳本文件。固然爲了測試先這樣引用一下，後來確定要本地化訪問的。

<script type="text/javascript" src="https://unpkg.com/xlsx@0.14.0/dist/xlsx.full.min.js"></script>
複製代碼

• 而後咱們就選擇最簡單的來咯，太複雜的搞起來麻煩,還不易實現。來直接 擼代碼

var filename = "file.xlsx"; //文件名稱
var data = [[1,2,3],[true, false, null, "sheetjs"],["foo","bar",new Date("2014-02-19T14:30Z"), "0.3"], ["baz", null, "qux"]];  //數據，必定注意須要時二維數組
var ws_name = "Sheet1"; //Excel第一個sheet的名稱
var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, ws_name);  //將數據添加到工做薄
XLSX.writeFile(wb, filename); //導出Excel
複製代碼

是否是很意外，就這幾行代碼，沒搞錯吧，就導出了一個Excel？確定的回答你，木有錯！！！

固然咱們平常中腫麼可能數據這麼簡單呢，大多少都是json形式返回到前端的，那麼下面來講一下怎麼將json的對象數組來轉化成SheetJS須要的二位數組，貼個代碼兒~

var data = [{'id':1,'name':'張三','age':18},{'id':2,'name':'李四','age':16},{'id':'3','name':'王天霸','age':20}]; //原始數據
var arr = new Array();  //定義一個二維數組存儲SheetJS所需數據
arr[0] = ['編號','姓名','年齡'];  //這裏定義一下Excel的頭部標題，記住這個順序，由於後面須要按照這個順序填充json裏的數據
data.forEach(function(val,idx,array){
  // 這裏能夠先對數據進行改變，獲得咱們須要的
  val['age'] = val['age']>18?'老年人':'年輕人';

  // 實例二位數組空間
  arr[idx+1] = new Array();
  arr[idx+1][0] = val['id'];
  arr[idx+1][1] = val['name'];
  arr[idx+1][2] = val['age'];

});

console.log(arr); //獲得數據咯
複製代碼

好了就這樣吧，回頭抽空再看看SheetJS的其餘使用方法，後續更新~

我的博客網站，歡迎你們來瞅瞅，博客地址