vue + element +table前端导出xlxs表格的数据

最新推荐文章于 2023-11-29 14:55:29 发布

新城大海

最新推荐文章于 2023-11-29 14:55:29 发布

阅读量396

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45664217/article/details/126072602

版权

首先安装xlsx这个

npm install xlsx -S

配置接口的文件和处理导出的逻辑

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>