Vue+Element-UI表格導出Excel案例

首先在頁面上准備好表格：

<template>
    <div class="table">
        <!--給表格添加一個id，導出文件事件需要使用-->
        <el-table :data="tableData1" border style="width: 54.45%" id="out-table">
           <el-table-column prop="date" label="日期" width="180"></el-table-column>
           <el-table-column prop="name" label="姓名" width="180"></el-table-column>
           <el-table-column prop="address" label="地址" width="280"></el-table-column>
         </el-table>
         <button @click="exportExcelBtn">點擊導出</button>
    </div>
</template>
<script>
import { exportExcelFn } from '../assets/js/commonUtil';
export default {
　　data(){
　　　　return {　　　　　
　　　　　　tableData1: [
        　　{
          　　date: '2016-05-02',
          　　name: '王小虎',
          　　address: '上海市普陀區金沙江路 1518 弄',
        　　},
        　　{
         　　 date: '2016-05-04',
          　　name: '王小虎',
          　　address: '上海市普陀區金沙江路 1517 弄',
        　　},
        　　{
          　　date: '2016-05-01',
          　　name: '王小虎',
          　　address: '上海市普陀區金沙江路 1519 弄',
        　　},
        　　{
          　　date: '2016-05-03',
          　　name: '王小虎',
          　　address: '上海市普陀區金沙江路 1516 弄',
        　　},
      　　],
　　　　}
　　},
  methods: {
　　//定義導出Excel表格事件
    exportExcelBtn() {
      exportExcelFn('豬豬', '#out-table');
    },
　}
}
</script>
<style lang="less">
　　
</style>

 其次，新建一個commonUtil.js文件； Element組件庫中的el-table表格導出需要的主要是兩個依賴:(xlsx 和 file-saver)

npm install --save xlsx file-saver

commonUtil.js：

// 引入導出Excel表格依賴
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
// excelName:導出excel的名字,  elementName:被導出的元素名
export function exportExcelFn(excelName,elementName) {
  /* 從表生成工作簿對象 */
  var wb = XLSX.utils.table_to_book(document.querySelector(`${elementName}`));
  /* 獲取二進制字符串作為輸出 */
  var wbOut = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array',
  });
  try {
    FileSaver.saveAs(
      //Blob 對象表示一個不可變、原始數據的類文件對象。
      //Blob 表示的不一定是JavaScript原生格式的數據。
      //File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
      //返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。
      new Blob([wbOut], { type: 'application/octet-stream' }),
      //設置導出文件名稱
      `${excelName}.xlsx`
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbOut);
  }
  return wbOut;
}

 大功告成~~！！！，喜歡請關注一下(づ￣3￣)づ╭❤～