Vue 前端Excel导出
Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件)
前言
在许多的后台系统中少不了导出Excel表格的功能,在项目中纯前端使用vue-json-excel插件来实现简单Excel表格的导出功能。
使用方法
1、安装依赖
npm install vue-json-excel -S
也可以使用淘宝镜像仓库,安装速度更快,推荐使用
npm install vue-json-excel --registry=http://registry.npm.taobao.org
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>
模板中标签属性的说明
name="用户统计列表" --------------导出Excel文件的文件名
:fields = "json_fields" ----------------Excel中表头的名称
:data = "json_data" -------------------导出的数据
4、Excel表格表头的设置
json_fields: { //导出Excel表格的表头设置'序号': 'type','姓名': 'userName','年龄': 'age','手机号': 'phone','注册时间': 'createTime',},
5、Excel表格中的数据
json_data:[{"userName":"张三","age":18,"phone":15612345612,"createTime":"2019-10-22"},{"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},{"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},{"userName":"赵六","age":18,"phone":15612345618,"createTime":"2019-10-15"},]
也可以先做一下判断,如果表中没有数据的时候,不显示导出按钮以及表格
<download-excel v-if="json_data.length >= 0"class="el-button":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
}
6、源代码
<template><div><el-row><el-col :span="6"></el-col><el-col :span="12"><h1>{{ msg }}</h1><download-excel v-if="json_data.length >= 0"class="el-button":data="json_data":fields="json_fields"worksheet = "My Worksheet"name ="用户信息列表">导出Excel</download-excel></el-col><el-col :span="6"></el-col></el-row><el-table:data="json_data"borderstyle="width: 100%"><el-table-columnprop="type"label="序号"align="center"width="180"></el-table-column><el-table-columnprop="userName"label="姓名"align="center"width="180"></el-table-column><el-table-columnprop="age"align="center"label="年龄"></el-table-column><el-table-columnprop="phone"align="center"label="手机号"></el-table-column><el-table-columnprop="createTime"align="center"label="注册时间"></el-table-column></el-table></div>
</template><script>
import JsonExcel from 'vue-json-excel'export default {name: 'HelloWorld',components:{'downloadExcel': JsonExcel},data () {return {msg: '使用vue-json-excel插件导出Excel',json_fields: { //导出Excel表格的表头设置'序号': 'type','姓名': 'userName','年龄': 'age','手机号': 'phone','注册时间': 'createTime',},json_data:[{"userName":"张三","age":18,"phone":15612345612,"createTime":"2019-10-22"},{"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},{"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},{"userName":"赵六","age":18,"phone":15612345618,"createTime":"2019-10-15"},]}},created() {this.initList();},methods: {initList(){for(let i in this.json_data){this.json_data[i].type=parseInt(i)+1}},}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-button{background-color: lightskyblue;
}</style>
常见的数据导出格式化的问题
在vue项目中使用vue-json-excel导出表格时,出现如下问题:
将要导出的数据中如果有较长的数字字符串(如“2415746843132487”),导出excel之后,excel会自动的将过长的数字串转换成科学计数法。
解决办法:
修改vue-json-excel源码,在td标签里添加 style="mso-number-format:'\@';"
就可以解决
解决后的效果:
想要表格中数据居中显示,也可以改源码,在tr标签添加 align="center"