Vue + element +table front end exports data of xlxs table

1. First install xlsx this

npm install xlsx -S

2. The file that configures the interface and the logic that handles the export

import axios from 'axios
const basefunc = process.env.NODE_ENV !== 'development' ? '生产的网址'： ‘开发的网址'
export default function handlerExport(data = {
     
     }) {
    
    
   return new Promise((resolve, reject)  => {
    
    
     axios.create({
    
    
        resopnseType: 'arraybuffer'
      }).post(`${
      
      basefunc}/base-conf/classif/download`, {
    
    
       ...data
       }).then(res => {
    
    
            resolve(res)
   }).catch(error => {
    
    
       reject(erorr)
    }
})
}

3. 书写html结构


<el-button @click="onExport"></el-button>


4. js功能

<script>
   import XlLSX from 'xlsx'
   // 引入配置文件
   import exportExcel from '../exportExcel'
   export default {
    
    
   data() {
    
    
      return {
    
    
      formline: {
    
    
          id: '',
          name: ''
     }, 
     pageNum: 1,
     pageSize: 10
      }
   }
   methods: {
    
    
      //  点击导出按钮
      onExport () {
    
    
          this.formLine = Object.assign({
    
    }, this. formline, {
    
    pageNum: this.pageNum,pageSize:this,pageSize})
          exportExcel ({
    
     ...this.formLine}).then(res => {
    
    
                 this.resolvBlob(res.data)
         }).catch(error => {
    
    
               this.$message.error('fail')
         })
       },
       // 解析文件流
       resolvBlob(res) {
    
    
         const link = document.createElement('a')
            link.style.display = 'none'
            let binaryDa = []
            binaryDa.push(res)
            link.href = window.URL.createObjectURL(new Blob(binaryDa))
            link.setAttribute(''down', '导出列表.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
      }
   }
 }

</script>