利用xlsx前端導出excel表格

<script lang="javascript" src="dist/xlsx.full.min.js"></script>
複製代碼

$ npm install xlsx
複製代碼

$ bower install js-xlsx
複製代碼

三種方式去引入xlsx

在項目裏 咱們可能會根據一個table去導出數據，也有可能根據數組來導出數據

• aoa_to_sheet converts an array of arrays of JS data to a worksheet.
• json_to_sheet converts an array of JS objects to a worksheet.
• table_to_sheet converts a DOM TABLE element to a worksheet.
• sheet_add_aoa adds an array of arrays of JS data to an existing worksheet.
• sheet_add_json adds an array of JS objects to an existing worksheet.

這是官網上的 幾種方式，  由於我在項目裏使用了table導出和 數組，那麼我運用的導出方式則是

• aoa_to_sheet converts an array of arrays of JS data to a worksheet.
• table_to_sheet converts a DOM TABLE element to a worksheet.

首先說一下 table表格如何去導出excel

function export2Excel(){
   function saveAs(obj, fileName) {//固然能夠自定義簡單的下載文件實現方式  var tmpa = document.createElement("a");
  tmpa.download = fileName || "下載";
  tmpa.href = URL.createObjectURL(obj); //綁定a標籤
  tmpa.click(); //模擬點擊實現下載
  setTimeout(function () { //延時釋放
    URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
  }, 100);
};
function s2ab(s){
  if(typeof ArrayBuffer !== "undefined"){
    var buf  =  new ArrayBuffer(s.length);
    var view  =  new Uint8Array(buf);
    for(var i=0;i!=s.length;++i){
      view[i] = s.charCodeAt(i) & 0xFF;
    };
    return buf;
  }else{
    var buf  =  new ArrayBuffer(s.length);
    for(var i=0;i!=s.length;++i){
      buf[i] = s.charCodeAt(i) & 0xFF;
    };
    return buf;
  }
};
var wb = xlsx.utils.table_to_book(document.getElementById(tableId));
var wbout = xlsx.write(wb,{bookType:'xlsx',type:'binary'});
saveAs(new Blob([s2ab(wbout)],{type:'application/octet-stream'}),你想要的名字+".xlsx");

}
複製代碼

而後是數組

function export2Excel(){
function getColNumber (str) {
  var n = 0;
  var s = str.match(/./g);//求出字符數組
  var j = 0;
  for (var i = str.length - 1, j = 1; i >= 0; i--, j *= 26) {
    var c = s[i].toUpperCase();
    if (c < 'A' || c > 'Z') {
      return 0;
    }
    n += (c.charCodeAt(0) - 64) * j;
  }
  return n;
}
  function saveAs(obj, fileName) {//固然能夠自定義簡單的下載文件實現方式  var tmpa = document.createElement("a");
  tmpa.download = fileName || "下載";
  tmpa.href = URL.createObjectURL(obj); //綁定a標籤
  tmpa.click(); //模擬點擊實現下載
  setTimeout(function () { //延時釋放
    URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
  }, 100);
};
function s2ab(s){
  if(typeof ArrayBuffer !== "undefined"){
    var buf  =  new ArrayBuffer(s.length);
    var view  =  new Uint8Array(buf);
    for(var i=0;i!=s.length;++i){
      view[i] = s.charCodeAt(i) & 0xFF;
    };
    return buf;
  }else{
    var buf  =  new ArrayBuffer(s.length);
    for(var i=0;i!=s.length;++i){
      buf[i] = s.charCodeAt(i) & 0xFF;
    };
    return buf;
  }
};
var wb ={          //本身去定義  SheetNames裏
  SheetNames:[],
  Sheets:{sheet1:''}
};

var ws = xlsx.utils.aoa_to_sheet(newOption.jsonData);
wb.SheetNames.push('Sheet1');
wb.Sheets['Sheet1'] = ws;
var widthArr =[];
 var   widthArrLength  = getColNumber(wb.Sheets.Sheet1['!ref'].split(":")[1].replace(/\d+/g,''));
 for( var j  = 0 ; j< widthArrLength;j++){
    widthArr.push({width:newOption.initCeilWidth})
  }
wb.Sheets.Sheet1['!cols']= newOption.cols.length > 0 ? newOption.cols :  widthArr;
var wbout = xlsx.write(wb,{bookType:'xlsx',type:'binary'});
saveAs(new Blob([s2ab(wbout)],{type:'application/octet-stream'}),你想要的名字+".xlsx");

}複製代碼

固然咱們也簡單的進行了融合 這個函數能夠放到大家各位的公共方法裏,

用法：

若是是table，則傳入tableId,若是是 json，則傳入jsondata。cols是excel每列的寬度

格式爲：cols=[{width:40},]

var option={
    tableId:'',
    jsonData:{},
    name:'導出',
    nameEng:'export',  //項目要求作過雙語 因此按狀況能夠刪除
    cols:[],
    initCeilWidth:20
  }複製代碼

export2ExcelCommon(option){
  var module={
    tableId:'',
    jsonData:{},
    name:'導出',
    nameEng:'export',  //項目要求作過雙語 因此按狀況能夠刪除
    cols:[],
    initCeilWidth:20
  }
   var newOption =  Object.assign(module,option);
  function getColNumber (str) {
    var n = 0;
    var s = str.match(/./g);//求出字符數組
    var j = 0;
    for (var i = str.length - 1, j = 1; i >= 0; i--, j *= 26) {
      var c = s[i].toUpperCase();
      if (c < 'A' || c > 'Z') {
        return 0;
      }
      n += (c.charCodeAt(0) - 64) * j;
    }
    return n;
  }
  function saveAs(obj, fileName) {//固然能夠自定義簡單的下載文件實現方式
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下載";
    tmpa.href = URL.createObjectURL(obj); //綁定a標籤
    tmpa.click(); //模擬點擊實現下載
    setTimeout(function () { //延時釋放
      URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
    }, 100);
  };
  function s2ab(s){
    if(typeof ArrayBuffer !== "undefined"){
      var buf  =  new ArrayBuffer(s.length);
      var view  =  new Uint8Array(buf);
      for(var i=0;i!=s.length;++i){
        view[i] = s.charCodeAt(i) & 0xFF;
      };
      return buf;
    }else{
      var buf  =  new ArrayBuffer(s.length);
      for(var i=0;i!=s.length;++i){
        buf[i] = s.charCodeAt(i) & 0xFF;
      };
      return buf;
    }
  };

  if(newOption.tableId && JSON.stringify(newOption.jsonData) =='{}'){
    var wb = xlsx.utils.table_to_book(document.getElementById(newOption.tableId));
  }else if(!newOption.tableId && JSON.stringify(newOption.jsonData)!='{}'){

    var wb ={
      SheetNames:[],
      Sheets:{sheet1:''}
    };
    var ws = xlsx.utils.aoa_to_sheet(newOption.jsonData);
    wb.SheetNames.push('Sheet1');
    wb.Sheets['Sheet1'] = ws;
  };
  var widthArr =[];
   var   widthArrLength  = getColNumber(wb.Sheets.Sheet1['!ref'].split(":")[1].replace(/\d+/g,''));
   for( var j  = 0 ; j< widthArrLength;j++){
      widthArr.push({width:newOption.initCeilWidth})
    }
  wb.Sheets.Sheet1['!cols']= newOption.cols.length > 0 ? newOption.cols :  widthArr;
  var wbout = xlsx.write(wb,{bookType:'xlsx',type:'binary'});
    if(window.i18n.locale=='zh'){   
      saveAs(new Blob([s2ab(wbout)],{type:'application/octet-stream'}),newOption.name+".xlsx");
    }else{
      saveAs(new Blob([s2ab(wbout)],{type:'application/octet-stream'}),newOption.nameEng+".xlsx");
    }
};複製代碼

最後但願能幫助到各位！