vue+file-saver+xlsx导出table为excel

1、安装:

npm install file-saver xlsx --save-dev
cnpm install file-saver xlsx --save-dev //淘宝镜像

2、引入:

import FileSaver from 'file-saver'
import * as xlsx from 'xlsx'

3、点击事件&&table表格代码块:

 <el-button type="text" size="mini" icon="el-icon-bottom" style="float: right;" @click="exportTable">导出Excel表</el-button>
      <el-table id="table2" :data="tableData" style="width: 100%" size="mini" :header-cell-style="{background:'#f9f9f9'}" :default-sort="{prop: 'date'}">
        <el-table-column
          v-for="(item, index) in tableTags"
          :key="index"
          :prop="item.prop"
          :label="item.title"
          :sortable="item.prop === 'date'"
          :show-overflow-tooltip="true"
          align="center"
          :min-width="item.title === '日期' ? '140px' : ''"
        >
          <template v-if="item.title === '日期'" v-slot="res">
            <div>{{ getParseTime(res.row.date) }}</div>
          </template>
          <template v-else-if="item.title !== '新增人数' && item.title !== '日期'" v-slot="res">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="parseInt(res.row[item.prop])" color="#64b5ff" />
          </template>
        </el-table-column>
      </el-table>

4、点击事件exportTable

// 导出excel表
    exportTable() {
      // table 关联导出的DOM节点
      const fixed = document.querySelector('.el-table__fixed')
      let wb
      const excelTitle = '标题'
      if (fixed) {
        wb = xlsx.utils.table_to_book(
          document.querySelector('#table2').removeChild(fixed)
        )
        document.querySelector('#table2').appendChild(fixed)
      } else {
        wb = xlsx.utils.table_to_book(document.querySelector('#table2'))
      }
      const wbout = xlsx.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          excelTitle + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值