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表格代码块:

 导出Excel表
      
        
          
          
        
      

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
    }

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