VUE+element+其他插件，导出功能的简单实现,

我们的导出excel，方法多种多样，但是我这里的实现方式很简单，通俗易懂，我要导出的数据是当前页面的table内容，也是后台传过来的。

方法一：正常流程

今天来推荐使用一个插件vue-json-excel，

参考：VUE中使用vue-json-excel超级方便导出excel表格数据_junkaicool的博客-CSDN博客_vue-json-excel

第一步：先下载

npm install vue-json-excel -S

第二步：导入

找到main.js文件：

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

第三步：添加组件

<--导出事件-->
<download-excel 
   class="blueBtn"  id="blueBtnDownload" ref="blueBtnDownload" 
   :name="excelName" :fields="json_fields" :data="json_data" worksheet="My Worksheet" 

>批量导出

</download-excel>

这里先解释下，download-excel 组件的用法，重点是excel的构成变量

1.name：是导出excel表格的名称

2.fields ：是excel标格内容的表头

3.data：就是excek的内容了

4.worksheet：这个是excel表格的表页名称，如下图

...

第四步：变量定义

data(){

    return{

            //批量导出
            excelName:"表格名称"//要导出表格的名称
            json_fields: {  //导出Excel表格的表头设置，中文部分是写在表格里，英文部分是参数名

             '名字': 'name',
	          '年龄': 'age',
	          '性别': 'sex',
	          '号码': 'number',

            },
            json_data://导出的表格内容，注意都是字符串
            [
                {"name":"张三","age":"18","sex":"男","number":"1580009"}, 
                {"name":"李四","age":"23","sex":"女","number":"1333098"}, 
                {"name":"王五","age":"32","sex":"女","number":"1668880"}, 
                {"name":"陈六","age":"14","sex":"男","number":"1789987"},    
            ],


    }


}

第四步：点击导出

点击导出就跟下载差不多，打开表格，看导出的内容：

所以我们