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

element ui steps 扩展 elements插件_其他

方法一：正常流程

今天来推荐使用一个插件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表格的表页名称，如下图

element ui steps 扩展 elements插件_vue.js_02

...

第四步：变量定义

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"},    
            ],


    }


}

第四步：点击导出

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

element ui steps 扩展 elements插件_其他_03

所以我们就导出成功了。

这里最重要的是什么？肯定是data内容拉，也就是我们会把当前或需要的内容导出，然后表格名称你自己定义。

方法二：伪装成按钮

但是这个不像按钮，我们想做像按钮那样的，把el-button按钮嵌套再download-excel组件里，看起来就是一个按钮了。

<download-excel 
   class="blueBtn" :data="json_data" :fields = "json_fields" id="blueBtnDownload"
   worksheet = "My Worksheet" :name="excelName" ref="blueBtnDownload"
>
   <el-button type="warning" icon="el-icon-top-right" @click="bn_openExport()">批量导出 
   </el-button>
</download-excel>



element ui steps 扩展 elements插件_element ui steps 扩展_04

类似这样的按钮，我们点击就可以导出了。

因为我们的data内容可根据你要传的值来决定，所以根据按钮的click事件方法来赋值

bn_openExport(){
  //假设这是你后台获取的内容，或者是你table表格的内容,shi json格式
       var value = this.value;
       for(let i=0;i<value .length;i++){
//我们把需要导出的值导出，json格式
this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number});
       }

}

可根据当前表格中，有没有让用户自己勾选想导出的内容，如果他不选，就默认导出当前的所有内容

//    this.$confirm('检测到您没有选中任何终端，默认导出当前表格内容', '提示', {
            //             confirmButtonText: '确定',
            //             cancelButtonText: '取消',
            //             type: 'warning'
            //    }).then(()=>{
            //没有勾选，默认导出当前表格内容,undefined为首次未勾选
            this.json_data = [];//表格内容先置空
            if(this.checkedList == undefined || this.checkedList.length == 0){//如果用户没有勾选
                console.log("导出内容：",this.pages.values);
                var test =  this.pages.values;
                for(let i=0;i<test.length;i++){
                    this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})   
                }       
            }else{
                console.log("勾选的内容:",this.pages.values);
                var test =  this.checkedList;
                for(let i=0;i<test.length;i++){
                    this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})   
                }
            }
            //    });

问题思考：

为了防止用户误点击，所以我们如果希望，再点击的时候，先弹出框告诉用户，让用户自行选择：

element ui steps 扩展 elements插件_vue.js_05

我们知道这个弹框的写法如下：

this.$confirm('你确定要导出吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'

}).then(()=>{
    //用户点击了确定按钮，执行


}).catch((err)=>{
       this.$message({
              message: "用户点击了取消",
              type: "info",
        });
});

所以我们就可以最终实现：

bn_openExport(){
    this.$confirm('你确定要导出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

    }).then(()=>{
       //用户点击了确定按钮，执行
        //假设这是你后台获取的内容，或者是你table表格的内容,shi json格式
       var value = this.value;
       for(let i=0;i<value .length;i++){
         //我们把需要导出的值导出，json格式
         this.json_data.push(   
 {"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number}
         );
       }

    }).catch((err)=>{
        this.$message({
              message: "用户点击了取消",
              type: "info",
        });
    });

}

问题来了，根据上面的写法没有任何错误，但是点击确定按钮以后，这个没有任何反应，没有导出。目前知道的问题是这个download-excel只能点击一次，页就是在“批量导出的时候”，已经实现了，不可能在这个弹窗再次点击实现第二次。

这个问题如何解决？看方法三

方法三：解决与this.$confirm弹框共存的问题

第一步：事前准备：

1.那就用到另个插件：

npm install -S file-saver xlsx
npm install -D script-loader

因为之前没有配置cnpm，下载一直卡在那里，然后我原来的xlsx下载的插件好像被冲掉了，编译不过去，只能用npm下就好了。

2.然后下载两个js：

Blob.js和Export2Excel.js（重点这个），下载路径：GitHub - MrBaiLiJie/importExcal: Vue + Element 实现导入Excel功能

文件下载后，解压，就在：

element ui steps 扩展 elements插件_element ui steps 扩展_06

然后把它们复制到项目里，我就放到项目文件build中。

 基本的导出写法如下：

不需要引用import我们安装的，省了这步

第二步：HTML

<el-button type="warning" icon="el-icon-top-right" @click="bn_openExport()">批量导出</el-button>

第三步:定义变量

跟方法一的变量定义类似

data(){

    return{

            //批量导出
            excelName:"表格名称",//要导出表格的名称

            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"},    
            ],


    }


}

第四步：就是直接实现方法，在methods：

bn_openExport(){
            this.$confirm("你确定要导出吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                //调用导出表格的方法
                this.export2Excel();
            }).catch(() => {
                this.$message({
                      message: "已取消导出",
                      type: "info",
                });
            });

},

export2Excel() {
            var $this = this;
            require.ensure([], () => {
                const { export_json_to_excel } = require("../../build/js/Export2Excel");//这个路径就是我们下载后放在项目中的         
                //这里必须使用绝对路径，根据自己的命名和路径
                const tHeader = [
                  "userId",
                  "name",
                  "age",
                  "status",
                ]; // 导出的表头名
                const filterVal = [
                  "userId",
                  "name",
                  "age",
                  "status",
                ]; // 导出的表头字段名,要插入内容数据需要一一对应
                const list = this.json_data;
                // this.excelData为传入的数据
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, `测试导出excel`); // 导出的表格名称，根据需要自己命名
                // tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
            });
},

formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
},

这里功能就实现完了，亲试可用，demo代码不用修改，然后你点击导出按钮，就直接下载了。

扩展需求：

1.如果用勾选了内容，那就导出用户勾选那些，如果用户什么都没有勾选，那就导出当前表格里的全部内容

2.表格名称由当前选择的而定，或自定义

//导出功能
bn_openExport(){//导出按钮
     //1.如果用勾选了内容，那就导出用户勾选那些，如果用户什么都没有勾选，那就导出当前表格里的全部内容
            this.$confirm("此操作将按照导入模板格式导出为excel文件供备份, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                //调用表格导出的方法
                this.export2Excel();
            }).catch(() => {
                this.$message({
                      message: "已取消导出",
                      type: "info",
                });
            });

},

export2Excel() {//导出方法
            this.json_data = [];//表格内容先置空
            //用户是否勾选，如步勾选，则默认导出当前的，勾选仅导出勾选那些
            if(this.checkedList == undefined || this.checkedList.length == 0){
                console.log("导出内容：",this.pages.values);
                var test =  this.pages.values;
                for(let i=0;i<test.length;i++){
                    this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})   
                }       
            }else{
                console.log("勾选的内容:",this.pages.values);
                var test =  this.checkedList;
                for(let i=0;i<test.length;i++){
                    this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})   
                }
            }

            var $this = this;
            require.ensure([], () => {
                //这里必须使用绝对路径，根据自己的命名和路径，之前下载的插件存放路径
                const { export_json_to_excel } = require("../../build/js/Export2Excel"); 
                const tHeader = [
                    "userId",
                    "name",
                    "age",
                    "status",
                ]; // 导出的表头名
                const filterVal = [
                    "userId",
                    "name",
                    "age",
                    "status",
                ]; // 导出的表头字段名,要插入内容数据需要一一对应
                const list = this.json_data;//数据内容
                // this.excelData为传入的数据
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, this.excelName); //tHeader为表头，data为表内容，this.excelName导出的表格名称
                // tHeader为导出Excel表头名称，this.excelName即为导出Excel名称
            });
},

formatJson(filterVal, jsonData) {//数据插入表中
     return jsonData.map(v => filterVal.map(j => v[j]));
},