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: '语音信息',
        });
      }

原文地址：https://www.cnblogs.com/godpo/p/11910103.html