vue导出excel表格

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>&nbsp;删除
          </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官网上学习。

效果展示

1. 要导出的数据
   
2. 导出excel表格
   
   以上就是vue项目导出excel表格的做法啦╰(°▽°)╯