官方文档:https://www.npmjs.com/package/vue-json-excel
一、安装vue-json-excel插件
// npm安装
npm install vue-json-excel -S
二、main.js中引入插件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入
import JsonExcel from 'vue-json-excel'
Vue.config.productionTip = false
// 引入
Vue.component('downloadExcel',JsonExcel)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
三、在代码中使用
<template>
<div id="app">
<download-excel
class="export-excel-wrapper"
:data="json_data"
:fields="json_fields"
type="xls"
title="班级学生表"
name="班级学生表.xls">
<button>导出Excel</button>
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
// 模拟的假数据
json_data: [
{ name: "张三", age: 18, sex: "男" },
{ name: "李四", age: 20, sex: "男" }
],
// 转化导出的字段名
json_fields: {
姓名: "name",
年龄: "age",
性别: "sex"
}
}
}
}
</script>
名称 | 类型 | 描述 |
data | Array | 要导出的数据 |
fields | Object | 要导出的 JSON 对象内的字段 |
type | string | 要导出的文件类型 |
title | string | 要导出的表头 |
name | string | 导出的文件名称 |
四、效果图
具体参数 请参考官方文档