vue-json-excel是一款非常好用且方便的VUE Excel插件，下面我们就来学习一下它的基本使用。
一：首先对vue-json-excel进行安装
npm install vue-json-excel -S
二：在项目中进行引用（main.js文件中）
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三：最后就可以直接在页面中进行使用啦
属性说明
-
json_fields：需要导出的字段（可以指定需要导出的字段，如不指定就是默认导出全部字段）
image.png
-
json_data：需要导出的数据
image.png
四：实例演示
<download-excel
class = "export-excel-wrapper" // 可以自定义
:data = "json_data" // 表格数据
:fields = "json_fields" // 表头数据
name = "订单模板.xls"> // 导出的Excel文件名
<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
<!-- 这里我使用element-ui的按钮来进行触发 -->
<el-button type="success" plain>模板下载</el-button>
</download-excel>
data(){
return {
json_fields: { // 数据为JSON格式
'order_id': 'order_id', // 这里的表头字段可以自由指定
'num': 'num',
'sku_id': 'sku_id'
},
json_data: [ // 数据为JSON格式
{
'order_id': 'CK20210525000001',
'num': '6',
'sku_id': '134729856'
},
{
'order_id': 'CK20210525000002',
'num': '2',
'sku_id': '134729878'
},
{
'order_id': 'CK20210525000003',
'num': '2',
'sku_id': '134729899'
}
]
}
}
页面效果
image.png
点击按钮进行下载
image.png
