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

标签

table

blob