npm i file-saver -S
npm i xlsx -S

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
 
// 導(dǎo)出Excel（根據(jù)表格當(dāng)前的數(shù)據(jù)進(jìn)行導(dǎo)出）
export function exportExcel1(dom, fileName) {
  // 前面這五行代碼作用就是去掉導(dǎo)出重復(fù)的表 就是導(dǎo)出的時候我這邊會導(dǎo)出兩個一樣的表格，可能是因為右側(cè)的fixed導(dǎo)致的，所以在導(dǎo)出的時候要刪除掉
  let tableDom = dom.cloneNode(true)
  let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
  let elTableFixed = tableDom.querySelector(".el-table__fixed")
  if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
  if(elTableFixed) tableDom.removeChild(elTableFixed);
 
  let wb = XLSX.utils.table_to_book(tableDom, { raw: true })
  let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);
  } catch(e) {
    console.error(e, wbout, '----->>>')
  }
}
 
// 導(dǎo)出Excel （根據(jù)數(shù)據(jù) 自定義導(dǎo)出  一般表格會分頁展示數(shù)據(jù)，如果按照上面的方式 只會導(dǎo)出當(dāng)前頁的，如果想導(dǎo)出所有數(shù)據(jù) 就使用該方法）
export function exportExcel(tableList, fileName) {
  let tableData = [['故障報警', '設(shè)備名稱', '故障內(nèi)容', '系統(tǒng)', '狀態(tài)', '開始時間', '結(jié)束時間']]
  tableList.forEach(item => {
    tableData.push([ item.alarm, item.equipname, item.point, item.system, item.status, item.starttime, item.endtime ])
  })
  let ws = XLSX.utils.aoa_to_sheet(tableData)
  let wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws)
  let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);
  } catch(e) {
    console.error(e, wbout, '----->>>')
  }
}
 
// 暫時沒用下面這兩個方法（也是可以的）
// 將一個sheet轉(zhuǎn)成最終的excel文件的blob對象，然后利用URL.createObjectURL下載
export function sheet2blob(dom, sheetName) {
  // 前面五行代碼作用就是去掉導(dǎo)出重復(fù)的表 就是導(dǎo)出的時候我這邊會導(dǎo)出兩個一樣的表格，可能是因為右側(cè)的fixed導(dǎo)致的，所以在導(dǎo)出的時候要刪除掉
  let tableDom = dom.cloneNode(true)
  let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
  let elTableFixed = tableDom.querySelector(".el-table__fixed")
  if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
  if(elTableFixed) tableDom.removeChild(elTableFixed);
  const sheet = XLSX.utils.table_to_sheet(tableDom);//將一個table對象轉(zhuǎn)換成一個sheet對象
  sheetName = sheetName || 'sheet1';
  var workbook = {
      SheetNames: [sheetName],
      Sheets: {}
  };
  workbook.Sheets[sheetName] = sheet; // 生成excel的配置項
 
  var wopts = {
      bookType: 'xlsx', // 要生成的文件類型
      bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設(shè)備上有更好的兼容性
      type: 'binary'
  };
  var wbout = XLSX.write(workbook, wopts);
  var blob = new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
  }); // 字符串轉(zhuǎn)ArrayBuffer
  function s2ab(s) {
      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;
  }
  return blob;
}
export function openDownloadDialog(url, saveName) {
  if (typeof url == 'object' && url instanceof Blob) {
      url = URL.createObjectURL(url); // 創(chuàng)建blob地址
  }
  var aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = saveName || ''; // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效
  var event;
  if (window.MouseEvent) event = new MouseEvent('click');
  else {
      event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }
  aLink.dispatchEvent(event);
}

<el-button icon="el-icon-download" @click="downloadTpl()" size="small">導(dǎo)出</el-button>
 
<el-table
  id="myTable"
  :data="dataList"
  size="medium"
  border
  @selection-change="selectionChangeHandle"
  v-loading="loading"
  class="table"
>
  <!-- ... -->
</el-table>

import { exportExcel, sheet2blob, openDownloadDialog } from './method'
export default {
  methods: {
    // 導(dǎo)出
    exportExcel() {
      exportExcel(document.getElementById('myTable'), '故障及報警.xlsx')
      //這個只需要 XLSX 庫 應(yīng)該也是可以的，我這邊暫時沒用
      // openDownloadDialog(sheet2blob(document.getElementById('myTable')), '故障及警.xlsx')
    }
  }
}