elementUI前端配合后端接口请求生成.xlsx表格

码海扬帆：前端探索之旅

已于 2024-05-13 13:15:15 修改

阅读量247

点赞数 1

分类专栏： vue 文章标签：前端 javascript vue.js elementui

于 2024-02-22 10:29:11 首次发布

ZYboke

本文链接：https://blog.csdn.net/weixin_60529746/article/details/136225835

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中创建一个独立的JS文件，使用Element-UI和axios实现表格导出功能，并加入防抖节流机制，防止频繁点击导致的数据冗余导出。

摘要由CSDN通过智能技术生成

写一个单独的js文件，封装一个如下的方法(table.js)

import { Message } from 'element-ui'  
export (baseURL, param, txt) { // baseURL:请求的接口 , param: 需要传递的表格导出条件 , txt: 表格导出时候的名字
    axios({
      method: 'post',
      url: `${baseURL}`,
      data: param,
      headers: {
        'Content-Type': 'application/json'
      },
      responseType: 'blob'//设置responseType为blob
    }).then(
      (resp) => {
        Message({
          message: '导出表格成功!',
          type: 'success'
        })
        if (txt) {
          var filename = `${txt}.xlsx`
        } else {
          var filename = `excel_${new Date().getTime()}.xlsx`
        }
        var href = window.URL.createObjectURL(new Blob([resp.data]));
        var downloadElement = document.createElement("a");
        downloadElement.href = href;
        downloadElement.download = decodeURIComponent(filename);
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      })
  } // 导出表格

html结构如下

<el-button type="success" size="mini" @click="exportSelect()">导出表格</el-button>

在页面中引入如下

import local from '@/utils/table'

js导出方法如下

    // 导出表格
    exportSelect() {
      this.$confirm('确定导出该记录', '导出提示：', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.getablelist()
        })
        .catch(() => {})
    },
    // 导出项目 - 测试用例
    async getablelist() {
      local.export('/iotDevice/exportSelect', this.searchForm)
    }
  },

在这个过程可能还需要进行一个防抖节流的限制 , 避免手快多次点击造成不必要的多余导出数据

防抖节流网址如下

在Vue项目中使用防抖和节流功能