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，那么你可以直接去我的下载区下载资源，不知道在哪下载的话，点击这里下载

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