vue增加数据导出excel（vue-json-excel）

最新推荐文章于 2024-08-12 19:47:44 发布

原创最新推荐文章于 2024-08-12 19:47:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #excel

前端知识集专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何在Vue项目中利用vue-json-excel组件实现数据导出为Excel的功能。从安装配置到具体代码示例，一步步指导如何将数据列表转换为可下载的Excel文件。

1、下载安装vue-json-excel，相当于命令npm install --save vue-json-excel 或者命令npm install vue-json-excel -S

2、创建js文件引入并全局注册标签：

import Vue from "vue";
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

3、在main.js中引入上面的js，import './plugins/importExcel.js'

4、在文件中加入即可

        <download-excel
          :data = "jiraExcelList"
          :fields = "excel_fields"
          name = "发布项目报表.xls">
      <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button type="primary" @click="searchAllPage">导出EXCEL</el-button>
        </download-excel>

:data中的是要导出数据的list，:fields是要导出的字段，name是导出文件的名字，页面中是分页获取后端的数据，所以需要获取所有的数据，重新写个方法获取所有的数据进行导出，方法searchAllPage中的请求参数每页的数量写到10000，