一个简单好用的vue前端导出excel的插件vue-json-excel
[github地址](GitHub - jecovier/vue-json-excel)
[npm地址](vue-json-excel - npm (npmjs.com))
一、基本使用方法
1、安装
npm install vue-json-excel
2、在main.js中引入JsonExcel
import Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);
3、templete 中使用
<download-excel :data="json_data">
Download Data
<img src="download_icon.png" />
</download-excel>
二、API参数列表
| 参数名 | 参数类型 | 描述 | 默认值 | |||
|---|---|---|---|---|---|---|
| data | Array | 需要导出的数据 | ||||
| fields | Object | 要导出的JSON对象中的字段，如果没有提供，JSON中的所有属性将被导出 | ||||
| export-fields (exportFields) | Object | 解决与其他组件的命名冲突问题，用于解决使用变量字段的其他组件（如 vee-validate）的问题。导出字段的工作原来与字段完全相同， | ||||
| type | string | 文件类型 xls或者csv | xls | |||
| name | string | 导出的文件名称 | data.xls | |||
| header | string/Array | 表格的标题。可以是字符串（一个标题）或字符串数组（多个标题）。 | ||||
| title(已弃用) | string/Array | 与header一样，为了向后兼容，我们也保留了title，但不建议使用它，因为它会与HTML5的title属性冲突。 | ||||
| footer | string/Array | 表格的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚） | ||||
| default-value (defaultValue) | string | 如果某一行没有字段值时候起作用，当行没有字段值时用作回退 | '' | |||
| worksheet | string | 工作表选项卡的名称 | 'Sheet1' | |||
| fetch | Function | 在点击下载按钮后，开始下载之前执行的函数。回调以获取数据下载之前，如果它被设置设置了，它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据的情况下才有效。 | ||||
| before-generate | Function | 在生成/获取数据之前调用方法，例如:显示加载进度 | ||||
| before-finish | Function | 在下载框弹出之前调用方法的回调，例如:隐藏加载进度 | ||||
| stringifyLongNum | Boolean | 字符串化长数字和小数（解决数字精度损失的问题），默认值：false | false | |||
| escapeCsv | Boolean | 这将转义CSV值，以修复一些excel数字字段的问题。但这会用=" and "包装所有csv数据，以避免你不得不将这个道具设为假。默认值:true | true |
三、小案例-基本使用
template标签中
<download-excel
types="xls"
:data="dataArr"
:fields="fields"
:name="exportName"
:worksheet="exportSheet"
:header="exportHeader"
:footer="exportFooter"
:defaultValue="exportDefaultValue"
>
<el-button type="success">导出</el-button>
</download-excel>
javaScript中
data() {
return {
dataArr: [
{
name: '小明',
age: 15,
city: '北京市',
school: '北京第一中学',
tel: '888810001'
},
{
name: '小红',
age: 14,
city: '上海市',
school: '上海第一中学',
tel: '888810002'
},
{
name: '小强',
age: 13,
city: '深圳',
school: '深圳第一中学',
tel: '888810003'
},
{
name: '小丽',
age: 16,
city: '广州',
school: '广州第一中学',
tel: '888810004'
}
],
fields: {
姓名: 'name',
年龄: 'age',
城市: 'city',
学校: 'school',
电话: 'tel'
},
exportName: '这是文件的名称',
exportSheet: '这是表格sheet的名称',
exportHeader: '这是表格的标题',
exportFooter: '这是表格的页脚',
exportDefaultValue: '这是一个默认的数据'
};
},
那我们看下导出的效果
1、浏览器下载的文件名
2、表格的效果
header和footer
header标题和footer页脚除了字符串，还可以是数组字符串，这样就可以实现多个标题和页脚 那我们改成数组试试
exportHeader: ['这是表格的标题1','这是表格的标题2'],
exportFooter: ['这是表格的页脚1','这是表格的页脚2'],
导出后的表格效果
四、一些重要的API
fields
当我们想对数据进行稍微加工的话，可以在fields 中使用callback回调函数的形式，对字段进行格式化
如我要在电话前加上文本‘座机’修饰一下
fields: {
姓名: 'name',
年龄: 'age',
城市: 'city',
学校: 'school',
电话: {
field:'tel',
callback:(value)=>{
return `座机:${value}`
}
}
},
导出后的效果为
那导出项为数组形式的情况时呢，我们增加一项爱好hobby这个数组
dataArr: [
{
name: '小明',
age: 15,
city: '北京市',
school: '北京第一中学',
tel: '888810001',
hobby:['足球','兵乓球']
},
{
name: '小红',
age: 14,
city: '上海市',
school: '上海第一中学',
tel: '888810002',
hobby:['唱歌','跳舞']
},
{
name: '小强',
age: 13,
city: '深圳',
school: '深圳第一中学',
tel: '888810003',
hobby:['画画','读书']
},
{
name: '小丽',
age: 16,
city: '广州',
school: '广州第一中学',
tel: '888810004',
hobby:['游戏','骑车']
}
],
在fields中使用callback，把数组转成字符串导出
fields: {
姓名: 'name',
年龄: 'age',
城市: 'city',
学校: 'school',
电话: {
field:'tel',
callback:(value)=>{
return `座机:${value}`
}
},
爱好:{
field:'hobby',
callback:(value)=>{
return value.map(item=>item).join(",")
}
}
},
导出的效果为
default-value
指的是如果某一行没有字段值时候起作用。当行没有字段值时用作回退。
我们试一下 新增一项数据为成绩score,但是没有给它赋值
dataArr: [
{
name: '小明',
age: 15,
city: '北京市',
school: '北京第一中学',
tel: '888810001',
hobby:['足球','兵乓球'],
score:null
},
{
name: '小红',
age: 14,
city: '上海市',
school: '上海第一中学',
tel: '888810002',
hobby:['唱歌','跳舞'],
score:null
},
{
name: '小强',
age: 13,
city: '深圳',
school: '深圳第一中学',
tel: '888810003',
hobby:['画画','读书'],
score:null
},
{
name: '小丽',
age: 16,
city: '广州',
school: '广州第一中学',
tel: '888810004',
hobby:['游戏','骑车'],
score:null
}
]
在fields中也把成绩字段导出
fields: {
姓名: 'name',
年龄: 'age',
城市: 'city',
学校: 'school',
电话: {
field:'tel',
callback:(value)=>{
return `座机:${value}`
}
},
爱好:{
field:'hobby',
callback:(value)=>{
return value.map(item=>item).join(",")
}
},
成绩:'score'
}
此时注意我们的exportDefaultValue: '这是一个默认的数据'
官方说的是某一行没有该字段时起作用，所以把后三个score直接删掉，干脆就不给这个属性，有值的才会有值，没值得就用默认，导出效果也是一样的
导出试下效果
fetch
点击下载按钮后立即执行，会在开始下载数据前执行。返回值为下载的数据。这里可以将函数定义为async函数，并在里面await暂停等待，请求数据，构造下载所需要的的数据
重要提示:只有在没有定义数据的情况下才有效
before-generate
在生成/获取数据之前调用方法，例如:显示加载进度
before-finish
在下载框弹出之前调用方法的回调，例如:隐藏加载进度
其实就是通过AJAX动态请求数据，然后在开始下载之前和开始下载之后加载loading，可以用来控制显示下载进度条。
那我们把这3个Function结合试一下
注意原有的 :data="dataArr"就可以不需要了
<download-excel
types="xls"
:fields="fields"
:name="exportName"
:worksheet="exportSheet"
:header="exportHeader"
:footer="exportFooter"
:defaultValue="exportDefaultValue"
:fetch='fetchData'
:before-generate='beforeGenerate'
:before-finish='beforeFinish'
>
<el-button type="success">导出</el-button>
</download-excel>
methods: {
fetchData() {
return [
{
name: '小明',
age: 15,
city: '北京市',
school: '北京第一中学',
tel: '888810001',
hobby:['足球','兵乓球'],
score:null
},
{
name: '小红',
age: 14,
city: '上海市',
school: '上海第一中学',
tel: '888810002',
hobby:['唱歌','跳舞'],
score:null
},
{
name: '小强',
age: 13,
city: '深圳',
school: '深圳第一中学',
tel: '888810003',
hobby:['画画','读书'],
score:null
},
{
name: '小丽',
age: 16,
city: '广州',
school: '广州第一中学',
tel: '888810004',
hobby:['游戏','骑车'],
score:null
}
]
},
beforeGenerate() {
console.log('开始获取数据0%');
},
beforeFinish() {
console.log('数据获取完成100%，弹出下载框');
}
}
点击导出按钮后，可以看到文件下载下来，且控制台输出了
总结
vue-json-excel整体来说，满足我们基础的导出excel的需求，且够简单易上手！
