vue-json-excel前端导出excel教程

系统管理员 2023-10-01 19:23 41阅读 0赞

> vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库。
> 
> 个人认为，导出在前端做，不是特别合适，最好是后端提供导出下载文件接口，如果后端确实不想提供接口，要让你做前端导出，那么不妨试试这个组件。

**目录**

一、安装依赖

二、引入配置

三、组件属性说明

四、导出HTML代码

五、导出逻辑代码

六、最终导出结果展示

七、使用该组件需要注意的点

--------------------

## 一、安装依赖 ##

npm install vue-json-excel

## 二、引入配置 ##

import Vue from "vue";
    import JsonExcel from "vue-json-excel";
    
    Vue.component("downloadExcel", JsonExcel);

## 三、组件属性说明 ##

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 四、导出HTML代码 ##

<div style="float: right; padding-right: 4px; margin-bottom: 30px"> 
       <download-excel class="export-excel-wrapper1" :fields="json_fields" title="导出各单位统计数据" :data="json_data" :name="dwtjsjName" :before-generate="startDownload"> 
        <el-button size="mini" style="right: 140px; position: absolute">
         导出各单位统计数据
        </el-button> 
       </download-excel> 
      </div>

## 五、导出逻辑代码 ##

## 六、最终导出结果展示 ##

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

## 七、使用该组件需要注意的点 ##

总体来说，组件用法还是蛮简单的，如果需要动态加载数据然后导出，这里一般需要先调用接口获取数据，这里需要注意的地方就是，使用before-generate回调函数进行下载前的数据加载，这里调用的方法需要进行异步处理（async....await),否则下载的数据会是一个空Excel。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bca8df37957747359ff8a7373127cd39.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUm9jLXhi,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f30d14e078fe4043a6fcf3f1d60ff968.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUm9jLXhi,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/daa6197be11341c3afac6efd6a337322.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUm9jLXhi,size_20,color_FFFFFF,t_70,g_se,x_16