VUE导出文件到EXCEL表格实例演示

写在前面

最近项目比较多,没太多时间更新博客,见谅、见谅、见谅!!!今天更新一片老生常谈的功能,导出数据到excel表格中,照例我还是会将源码放到这里gaojizu,感兴趣或者需要的可以直接clone就可以了!这个项目可以关注一下, 我会持续更新的,里面有很多使用的vue小功能,相信你们会用到的,不要白嫖,给我的git点个关注不过分吧!

效果预览

导出成功

在这里插入图片描述

导出的EXCEL

在这里插入图片描述

源码:

<template>
  <div>
    <el-button id="btn" type="primary" icon="el-icon-download" @click="handleDownload">导出EXCEL</el-button>
    <el-table :data="studentList" border stripe style="width: 100%;margin-top: 20px">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="住址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "exportExcel",
    data() {
      return {
        studentList: [],
        temp_list: []
      }
    },
    created() {
      this.getStudents()
    },
    methods: {
      getStudents() {
        this.$axios.get("api/getStudents.do").then(res => {
          this.studentList = res.data.data.list
          console.info(res)
        })
      },
      handleDownload() {
        const loading = this.$loading({
          lock: true,
          text: '导出中,请稍后......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        //这里是过滤条件,自己根据需要进行使用
        let query_params = {
          'search': null,
          "page": null,
          'page_size': null
        }
        this.$axios.get("api/getStudents.do").then(response => {
          this.temp_list = response.data.data.list
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['Id', '姓名', '性别', '年龄', '住址']
            const filterVal = ['id', 'name', 'sex', 'age', 'address']
            if (this.temp_list) {
              const data = this.formatJson(filterVal, this.temp_list)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: '学生表'
              })
            } else {
              this.$notify({
                title: 'Failure',
                message: "未能获取到任何数据",
                type: 'error',
              })
            }
            loading.close()
            this.$notify({
              title: '成功',
              message: '成功导出' + this.temp_list.length + '条数据',
              type: 'success'
            });
            this.temp_list = null
          })
        })
      },
      /**
       * @function formatJson 格式化
       * @param filterVal
       * @param jsonData
       * @returns {*}
       */
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
    }
  }
</script>

<style scoped>
  #btn {
    float: left;
    margin: 10px 10px 10px 10px;
  }
</style>

这里因为没有后端的接口,我使用的是mockjs模拟的接口,接口具体数据是这样的,什么你问我mockjs怎么用的?额…我没写过相关的文章吗?下次抽时间写一下吧!

接口返回数据格式

/**
 * 模拟接口返回的数据
 * @type {*[]}
 */
let lists = []
for (let i = 0; i < 100; i++) {
  lists.push({"id": + i, "name": "name" + i, "sex": 'sex' + i, "age": 'age' + i, "address": 'address' + i})
}
console.info(lists)
const studentLists = {
  "code": 20000,
  "message": "success",
  "data": {
    "list": lists
  }
}
export default studentLists

具体的目录结构,怎么使用可以直接下载github里面的源码进行使用,这里简单的说一下需要安装的两个插件
在这里插入图片描述
知道你们懒,所以这两句命令是:

npm install -S file-saver xlsx
npm install -D script-loader

相信csdn会在我上面这两行代码右边友好的加上复制的按钮,我就不加了!
PS:如果最后你们使用的时候,效果和我的不一样,那么需要反思一下了,为什么不一样,是不是js文件没有导入呢?如果你下载了我的git上面的代码就不会有问题,因为我直接引入了那两个文件,就是这两个文件
在这里插入图片描述
那如果你很讨厌使用git,那么你可以直接去我的下载区下载资源,不知道在哪下载的话,点击这里下载

苦逼的我只能利用中午休息的时间给你们更新,我太难了,我最近在杭州,有小伙伴找我玩的可以联系我,请我吃烧烤的话我不会拒绝的!😂😂😂😂😂😂😂

何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值