vue导出excel
在做前端页面时,我们有时需要将一些页面数据导成excel导出来。今天讲一下vue项目中的导出excel。
1. 下载 export-from-json
npm i --save export-from-json
2. 导入 export-from-json
import exportFromJSON from 'export-from-json'
3. 按钮绑定导出excel的事件exportHandler
<el-button type="primary" @click="exportHandler">导出excel</el-button>
注意:这里的按钮是用了Element-plus的按钮组件。
导出为excel的数据
<!-- 表格 -->
<el-table :data="allData">
<el-table-column header-align="center" align="center" type="index" label="序号" width="auto" />
<el-table-column header-align="center" align="center" prop="img" label="图片" width="auto">
<template #default="{ row }">
<img :src="row.img" alt="" class="imgs">
</template>
</el-table-column>
<el-table-column header-align="center" align="center" prop="link" label="链接" width="auto" />
<el-table-column header-align="center" align="center" prop="alt" label="提示" width="auto" />
<el-table-column header-align="center" align="center" label="操作" width="auto">
<!-- 表格默认插槽v-slot=“{ row }“替换为#default=”{ row }” -->
<template #default="{ row }">
<el-button type="primary" @click="deleteHandle(row.bannerid)">
<el-icon>
<DeleteFilled />
</el-icon> 删除
</el-button>
</template>
</el-table-column>
</el-table>
注意:这里的表格是用了Element-plus的表格组件,并且里面由于项目需要使用了插槽,里面的其它方法,如:deleteHandle无需关注,与导出excel表格无关。
导出excel的函数exportHandler
exportHandler() {
exportFromJSON({
data: this.allData,
fileName: '轮播图数据表',
exportType: 'xls',
fields: {
'img': "图片",
'link': "链接",
'alt': '提示'
}
})
}
注意:函数里面的exportFromJSON是刚刚下载好的插件export-from-json负责接收类型章节演示的选项。里面有许多属性,如:data是导出的数据;fileName是导出表格的名字;exportType是导出文件的格式;fields是导出表格的表头名字。
具体学习export-from-json可以到npm官网上学习。
效果展示
- 要导出的数据
- 导出excel表格
以上就是vue项目导出excel表格的做法啦╰(°▽°)╯