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

web前端开发

共 1980字,需浏览 4分钟

 ·

2020-10-23 15:03

来源 | https://www.daimajiaoliu.com/daima/479836640100408
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、在模板中使用
:data = "json_data" :fields = "json_fields" name = "用户统计列表"> 导出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来判断显示哪一个(样式就自己去写了)
导出Excel导出Excel
如果表格中有数据的时候,点击导出功能
打开下载的文件,你会发现在序号这一列是没有的,你可用自己是用js给导出的json_data数据加一个属性。

在给json_data数据赋值的时候,添加加一个type属性,来显示序号。
for(let i in this.json_data){ this.json_data[i].type=parseInt(i)+1 }

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

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

总结

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

浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报