Vue export table data

Vue export table data

1. Download the plugin

npm install xlsx --save

npm install file-saver --save

2. Reference plugin

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

HTML

<el-button @click="exportData" style="margin-bottom: 20px">
      导出数据
</el-button>
<el-table ref="tableSort" v-loading="listLoading" :data="list" id="export-table">
	...
</el-table>

JS

exportData() {
    
    
      let wb = XLSX.utils.table_to_book(document.querySelector('#export-table'))
      let wbexport = XLSX.write(wb, {
    
    
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      })
      try {
    
    
        FileSaver.saveAs(
          new Blob([wbexport], {
    
     type: 'application/octet-stream' }),
          '测试数据.xlsx'
        )
      } catch (e) {
    
    
        if (typeof console !== 'undefined') console.log(e, wbexport)
      }
      return wbexport
    },

Export as follows: