el-tabel导出excel表格

1、安装插件

npm install file-saver --save
npm install xlsx --save

2、引入插件


import FileSaver from "file-saver";
import * as XLSX from 'xlsx';

3、在tabel中添加ref属性和导出方法

el-tabel导出excel表格_第1张图片

 

4、添加方法

    exportExcel (excelName) {
      try {
        const $e = this.$refs['report-table'].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }

        const wb = XLSX.utils.table_to_book($table, { raw: true })
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    }

 

你可能感兴趣的:(vue,elementui)