专栏首页用户7363577的专栏VUE导出文件到EXCEL表格实例演示

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

写在前面

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

效果预览

导出成功
导出的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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue+element踩坑记-checkbox的全选和全不选的操作实现

    在做一个业务的时候,有一个需求是多个条件进行筛选,全部是checkbox的筛选条件,可以进行任意一个的选择还可以进行全选和全不选,这样进行表格的筛选

    何处锦绣不灰堆
  • vue+echarts 实现两个小例子

    来吧,今天写一个关于vue+echarts绘制图表的教程,写的原因很简单, 最近有不少人问,这是其一,其二是我的博客里面没有一片关于echarts的相对比较能看...

    何处锦绣不灰堆
  • js实现图片3D轮播效果(收藏)

    何处锦绣不灰堆
  • vue+Element实现固定表头、左侧列、搜索、排序与分页

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • js对象属性的getter和setter

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的...

    徐小夕
  • 1625行,解开 underscore.js 的面纱 - 第六章

    北京的雨已经断断续续下了好久,昏昏欲睡的躲在家里不愿意出门,火影忍者快要结束了,一拳超人第二季据说还要等好多年,勇者大冒险貌似断更了,我又是在不喜欢海贼王的画风...

    前端博客 : alili.tech
  • Retrofit解析2之使用简介

    前面介绍完RESTful之后,我们先来初步认识下Retrofit的使用"姿势"。本文的主要内容如下:

    隔壁老李头
  • Java 效率工具之 Lombok

    点击上方 好好学java ,选择 星标 公众号重磅资讯、干货,第一时间送达今日推荐:用好Java中的枚举,真的没有那么简单!个人原创+1博客:点击前往,查看更...

    好好学java
  • Java效率工具之Lombok

    还在编写无聊枯燥又难以维护的POJO吗?洁癖者的春天在哪里?请看Lombok!在过往的Java项目中,充斥着太多不友好的代码:POJO的getter/sette...

    乱敲代码

扫码关注云+社区

领取腾讯云代金券