vue 導出 xlsx

1.你需要安裝 xlsx，flie-saver

   使用npm ：

　　npm install  xlsx -save

　　npm install file-saver --save

2.對xlsx進行封裝處理：

import fs from 'file-saver'
import XLSX from 'xlsx'


export function xlsx(json, fields, filename = '.xlsx') {//導出xlsx
  json.forEach(item => {
    for (let i in item) {
      if (fields.hasOwnProperty(i)) {
        item[fields[i]] = item[i];
      }
      delete item[i]; //刪除原先的對象屬性
    }
  })
  let sheetName = filename //excel的文件名稱
  let wb = XLSX.utils.book_new()  //工作簿對象包含一SheetNames數組，以及一個表對象映射表名稱到表對象。XLSX.utils.book_new實用函數創建一個新的工作簿對象。
  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //將JS對象數組轉換為工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//設置表格的樣式
  let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //寫入的樣式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename + '.xlsx')
}

const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    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 {
    buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

3.在對應頁面中，將接口返回數據，進行處理：

<a-button style="margin-left: 8px" type="primary" @click="handleExcel">導出</a-button>

　　

		handleExcel() {
		  let fields = {
		    title0: "序號",
		    title1: "姓名",
		    title2: "數量",
		  };
		  let arry = [];
		  let i = 0;
		  let params = {};
		  params.page = 1;
		  params.pageSize = 999; //這里也可以直接通過接口返回的total，拿值
		  memberasList(params).then(res=>{
			  console.log(res)
			 res.list.forEach(ele => {
			   i++;
			   arry.push({
			     title0: i,
			     title1: ele.name,
			     title2: ele.num ,
			   });
			 });
			 xlsx(arry, fields, "excel統計列表"); 
		  });
		},

　　這樣，就可以實現，點擊下載excel表的操作了