vue中纯前端实现导出简单Excel表格的功能

碧茂大数据 2020-12-01

543

更多精彩，请点击上方蓝字关注我们！

Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件)

前言

在许多的后台系统中少不了导出Excel表格的功能，下面就是我在实际的项目中纯前端使用vue-json-excel插件来实现简单Excel表格的导出功能；如有描述不当，欢迎指正，补充。

使用方法

1、安装依赖


npm install vue-json-excel

也可以使用cnpm(淘宝镜像),安装速度更快,推荐使用


cnpm install vue-json-excel

2、在项目的入口文件(main.js)中引入


import Vue from 'vue'
import JsonExcel from 'vue-json-excel'


Vue.component('downloadExcel', JsonExcel)

3、在模板中使用


<download-excel
    :data   = "json_data"
    :fields = "json_fields"
    name = "用户统计列表">
   导出Excel
</download-excel>

3.1、模板中标签属性的说明

name=“用户统计列表” --------------导出Excel文件的文件名
:fields = “json_fields” ----------------Excel中表头的名称
:data = “json_data” -------------------导出的数据

4、Excel表格表头的设置


export default{
   data(){
       return{
          json_fields: {  导出Excel表格的表头设置
            '序号': 'type',
            '姓名': 'userName',
            '年龄': 'age',
            '手机号': 'phone',
            '注册时间': 'createTime',
          },
       }
    }
 }

5、Excel表格中的数据


export default{   data(){       return{          json_data:[            {"userName":"张三","age":18,"gender":"phone":15612345612,"createTime":"2019-10-22"},            {"userName":"李四","age":17,"gender":"phone":15612345613,"createTime":"2019-10-23"},            {"userName":"王五","age":19,"gender":"phone":15612345615,"createTime":"2019-10-25"},            {"userName":"赵六","age":18,"gender":"phone":15612345618,"createTime":"2019-10-15"},               ]       }   }}

这是点击查询按钮查询出来的数据:

你也可以先做一下判断，如果表中没有数据的时候,点击"导出Excel"按钮时给个提示，"当前无数据显示，无法执行导出功能,"或者直接就不显示导出按钮；

我这里是在HTML中写了两个导出的按钮,如果没有数据的时候就显示第一个,点击的时候会有个提示。

HTML的内容,通过isExport来判断显示哪一个(样式就自己去写了)


<el-button v-if="isExport" @click="nodaochuBtn()" type="primary">导出Excel</el-button>
<download-excel v-else  class="blueBtn" :data="json_data" :fields = "json_fields" worksheet = "My Worksheet" name = "用户信息列表">导出Excel</download-excel>

如果表格中有数据的时候,点击导出功能

打开下载的文件,你会发现在序号这一列是没有的,你可用自己是用js给导出的json_data数据加一个属性。

在给json_data数据赋值的时候，添加加一个type属性,来显示序号。


   for(let i in this.json_data){               this.json_data[i].type=parseInt(i)+1           }

如果里面的的时间字段精确到秒的话，可能导出来的数据不会那么精确,这时你可以通过改插件的源码来解决; 参考连接。

还有就是想要表格中数据居中显示,也可以改源码;

总结

以上就是我在实际项目中导出Excel表格的方法，其实像这种导出简单Excel表格的功能，并不需要后台，前端就可已实现，如果还有其他好的方法可以一起分享学习。

图文来源网络

版权归原作者所有，侵联删

END

碧茂课堂精彩课程推荐：

1.Cloudera数据分析课；

2.Spark和Hadoop开发员培训；

3.大数据机器学习之推荐系统；

4.Python数据分析与机器学习实战；

详情请关注我们公众号：碧茂大数据-课程产品-碧茂课堂

现在注册互动得海量学币，大量精品课程免费送！

关注最新行业动态，

加群进行技术交流！

前端

文章转载自碧茂大数据，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

vue中纯前端实现导出简单Excel表格的功能

前言

使用方法

总结

评论