如何将el-table的数据导出？-阿里云开发者社区

如何将el-table的数据导出？

2023-07-12 212

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何将el-table的数据导出？

最近公司要求实现将表格内容导出，特地将方法分享出来供大家学习。

设计图：

首先需要安装两个相关依赖：

npm install --save xlsx file-saver

其次在该页面引入依赖

1. import FileSaver from 'file-saver'
2. import XLSX from 'xlsx'

接下来前端代码，我们设置两个参数，一个name代表导出exel表的名称，一个是el-table的id，这样极大的提高了方法的复用率。

            <div class="title1-right">
              单位排名
              <el-button type="primary" size="mini" class="button" @click="exportExcel('单位排名','unit')"><i class="iconfont icon-daochuyubaodan " style="margin:10px 10px 0 0" />导出</el-button>
            </div>
          </div>
          <el-table
            id="unit"
            v-loading="loading"
            :data="tableData"
            tooltip-effect="dark"
            height="470"
            style="width: 96%;margin: 20px auto "
            :header-cell-style="{background:'#f5f7fa',color:'#909399'}"
          >
            <el-table-column
              label="排名"
              width="80"
              align="center"
              :resizable="false"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-if="scope.row.ranking!=='01'&&scope.row.ranking!=='02'&&scope.row.ranking!=='03'">{{ scope.row.ranking }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="单位"
              width="120"
              align="center"
              :resizable="false"
              show-overflow-tooltip
            >
              <template slot-scope="scope">{{ scope.row.unit }}</template>
            </el-table-column>
            <el-table-column
              :resizable="false"
              show-overflow-tooltip
              label="优秀率"
              align="center"
            >
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.percentage" />
              </template>
            </el-table-column>
          </el-table>

导出方法：

     exportExcel(name, id) {
      var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), name + '.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    }