首先下载一个插件 vue-json-excel,这个插件是json数据转换为简单excel的工具
npm i vue-json-excel
然后在main.js中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
代码示例:
<template>
<div>
<download-excel
class="export-excel-wrapper"
:data="tableData"
:fields="tableFields"
type="xls"
worksheet="My Worksheet"
name="用户信息"
>
<el-button>导出EXCEL</el-button>
</download-excel>
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
tableFields: {
姓名: "name", //支持嵌套属性
时间: "date", //支持嵌套属性
地址: "address",
},
// json_meta: [
// [
// {
// " key ": " charset ",
// " value ": " utf- 8 "
// }
// ]
// ]
};
},
};
</script>
<style>
</style>
具体api的使用
1.data 类型:Array 需要导出的数据,支持中文
2.fields 类型:object 定义需要导出数据的字段
3.name 类型:Sting 导出文件的名字
4.type 类型:String 导出文件的类型 默认xsl
5 export-fields (exportFields) :object 用于解决使用可变字段的其他组件(例如vee-validate)的问题。exportFields的工作原理类似于字段
6.header 表头 可以传对个值 类型 String 或者 list
7 footer 页脚 可以传多个值 数据的页脚。可以是一个字符串(一个页脚)或一个字符串数组(多个页脚)。
8 default-value (defaultValue) 类型 String 当字段没有值的时候,付给默认值
9.worksheet 类型String 工作表选项卡的名称 默认 sheet1
10.fetch 进行回调,以在下载之前获取数据
11.before-generate 在生成/获取数据之前回调以调用方法
12.before-finish 在下载框弹出之前进行回调以调用方法,例如:隐藏加载进度
13.stringifyLongNum 字符串化长整数和十进制(解决数字精度丢失的问题),默认值:false