前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VUE导出文件到EXCEL表格实例演示

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

作者头像
何处锦绣不灰堆
发布2020-07-03 10:41:50
1.4K0
发布2020-07-03 10:41:50
举报
文章被收录于专栏:农历七月廿一
写在前面

今天更新一片老生常谈的功能,导出数据到excel表格中,照例我还是会将源码放到这里gaojizu,感兴趣或者需要的可以直接clone就可以了!

效果预览
导出成功
在这里插入图片描述
在这里插入图片描述
导出的EXCEL
在这里插入图片描述
在这里插入图片描述
源码:
代码语言:javascript
复制
<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怎么用的?额…我没写过相关的文章吗?下次抽时间写一下吧!

接口返回数据格式
代码语言:javascript
复制
/**
 * 模拟接口返回的数据
 * @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里面的源码进行使用,这里简单的说一下需要安装的两个插件

在这里插入图片描述
在这里插入图片描述

知道你们懒,所以这两句命令是:

代码语言:javascript
复制
npm install -S file-saver xlsx
npm install -D script-loader

PS:如果最后你们使用的时候,效果和我的不一样,那么需要反思一下了,为什么不一样,是不是js文件没有导入呢?如果你下载了我的git上面的代码就不会有问题,因为我直接引入了那两个文件,就是这两个文件

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/07/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写在前面
  • 效果预览
    • 导出成功
      • 导出的EXCEL
      • 源码:
      • 接口返回数据格式
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档