element-ui 和ivew-ui的table導出export純前端（可用）

一、element-ui 
1、安裝依賴
Element組件庫中的el-table表格導出需要的主要是兩個依賴:(xlsx 和 file-saver)

npm install --save xlsx file-saver

2、頁面

<el-tooltip content="導出數據" placement="top">
  <el-button type="warning" plain @click="exportExcel()">導出</el-button>
  </el-button>
</el-tooltip>

<el-table
  v-loading="loading"
  element-loading-text="拼命加載中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
  :data="dataList"
  class="table"
  id="out-table"
  :header-cell-style="{background:&quot;rgb(48, 65, 86)&quot;,color:&quot;white&quot;}"
  border
>

<el-table-column type="index" />
<el-table-column prop="param" label="參數" />
<el-table-column prop="paramType" label="參數值類型" />
<el-table-column prop="example" label="示例" /><el-table>

 3、js

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

loading: true,
dataList: [{
  param: 'phone',
  paramDesc: '需要發送的手機號碼',
  example: 'null'
}, {
  param: 'templateId',
  paramDesc: '模板id,聯系客服人員申請成功的模板ID',
  example: 'null'
}, {
  param: 'variable',
  paramDesc: '',
  example: 'null'
}],

    exportExcel() {
      // 定義導出Excel表格事件
      /* 從表生成工作簿對象 */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* 獲取二進制字符串作為輸出 */
      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' }),
          // 設置導出文件名稱 xxx.xlsx
          'xxx.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }

2、效果

 

 

 

 

 

 

 

 

 

二、ivew 可參考官方接口（https://iviewui.com/docs/guide/install）

 

<Button style="width: 95px" type="success" icon="ios-download-outline" @click="exportData()">導出</Button>

<Table
          :columns="tableColumn"
          :data="tableData"
          stripe border
          ref="table"
          :height="tableHeight"
        ></Table>

   tableHeight: 400px,

tableColumn:[

{
  type: "index",
  align: 'center',
  width: 60,
  fixed: 'left'
},

{
  type: "phone",
  align: 'center',
  width: 60,
  fixed: 'left'
},

]

tableData:[

{
  param: 'phone',
  paramDesc: '需要發送的手機號碼',
  example: 'null'
}, {
  param: 'templateId',
  paramDesc: '模板id,聯系客服人員申請成功的模板ID',
  example: 'null'
}, {
  param: 'variable',
  paramDesc: '',
  example: 'null'
}

],

 exportData() {
        this.$refs.table.exportCsv({
          filename: '語音信息',
        });
      }