前端json导出excel方法

<template>
  <div class="esbody">
    <es-search ref="esQuery" :ay-list="ayList" v-on:esQueryFormComplete="reQuery"></es-search>
    <query-Estable ref="esTable" :dataList="dataList" v-on:sorterChange="sorterChange"></query-Estable>
    <el-button
        size="mini"
        @click="exportTable"
        type="primary"
        style="margin-top: 10px"
        >
        导出明细
    </el-button>
    <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page.sync="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
  </div>
</template>
<script>
import {datePattern,JSONToExcelConvertor} from "@/utils/index";
import {queryEs} from "@/api/es/index";
import esSearch from "@/components/es-search";
import queryEstable from "@/components/es-table"

export default {
    data(){
        return {
            ayList:[],
            pageIndex: 1,
            pageSize: 100,
            total: 0,
            dataList: [],
        }
    },
    mounted(){
        this.init();
    },
    components: {
      esSearch,
      queryEstable
    },
    methods:{
        init(sort,isExport){
            let vm = this;
            let queryData = {
                pageNo:isExport?1:vm.pageIndex,
                pageSize:isExport?10000:vm.pageSize,
               "kw_op": "qs",           
                "type": 0,
                "slop": 0,
                "keywords":[
                        "(\"补贴\")"
                        ],
                "ops":[
                    {
                        "key":"wslb",
                        "value":"审查报告",
                        "op":"="
                    },
                    {
                        "key":"source",
                        "value":"tyyw",
                        "op":"="
                    }
                ],
                "sorts": [
                    {
                        "key": sort?sort.field:"createDate",
                        "type": sort?(sort.order=="asc"?"0":"1"):"1"
                    }
                ]
            }
            let searchForm = vm.$refs["esQuery"].searchForm;
               if(searchForm&&searchForm.orgNo){
               let   dwobj ={}
              if(searchForm.orgNo.indexOf("OR")!=-1){
                 dwobj = {
                    "key": "orgNo",
                    "value": searchForm.orgNo,
                    "op": "qs",
                    "type": 1
                }
              }else{
                  dwobj = {
                    "key": "orgNo",
                    "value": searchForm.orgNo,
                    "op": "=",
                    "type": 1
                }
              }
                queryData["ops"].push(dwobj);
            }
            if(searchForm.timeRange&&searchForm.timeRange.length){
                var startTime = datePattern(new Date(searchForm.timeRange[0]),"yyyy-MM-dd")+" 00:00:00";
                var endTime = datePattern(new Date(searchForm.timeRange[1]),"yyyy-MM-dd")+" 23:59:59";
                let startOps =  {
                    "key": "slrq",
                    "value": startTime,
                    "op": "gte",
                    "type": 1
                }
                let endOps = {
                    "key": "slrq",
                    "value": endTime,
                    "op": "lte",
                    "type": 1
                }
                queryData["ops"].push(startOps);
                queryData["ops"].push(endOps);
            }
            if(searchForm.ay){
              queryData["ops"].push({
                "key":"content_fy",
                "value":searchForm.ay,
                "op":"="
              })
            }
            if(searchForm.caseName){
              queryData["ops"].push({
                "key":"caseName",
                "value":searchForm.caseName,
                "op":"="
              })
            }
            if(searchForm.caseNumber){
              queryData["ops"].push({
                "key":"caseNumber",
                "value":searchForm.caseNumber,
                "op":"="
              })
            }
             if(searchForm.ajlb){
              queryData["ops"].push({
                "key":"ajlb",
                "value":searchForm.ajlb,
                "op":"="
              })
            }
            vm.loadingList = vm.$loading({
                lock: true,
                text: "正在获取数据",
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            queryEs(queryData,{hideloading:true}).then(res=>{
                let resData = res.data.data;
                let list = resData.list;
                let nlist = [];
                list.map((v)=>{
                  nlist.push(v.source);
                })
                if(!isExport){
                  vm.dataList = nlist;
                  vm.total = resData.totalCount;
                }
                vm.loadingList.close();
                if(isExport){
                  let exportDatas = [];
                  let titles = ["案件名称","部门受案号","文书名称","文书类别","案件类别","承办检察官","受理日期"];
                  let keys = ["caseName","caseNumber","docName","wslb","ajlb","undertaker","slrq"];
                  nlist.map((v)=>{
                    exportDatas.push(v);
                  })
                  JSONToExcelConvertor(exportDatas,this.$route.meta.title+"_"+datePattern(new Date(),"yyyy_MM_dd_HH_mm_ss"),titles,keys,false,this.$route.meta.title+"表");
                }
            })
        },
        reQuery(){
          this.init();
        },
        sorterChange(data){
            this.init(data.sort);
        },
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.reQuery()
           
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
                   this.reQuery()
          
        },
        exportTable(){
          this.init(null,true);
        }
       
    }
}
</script>

export function JSONToExcelConvertor(JSONData, FileName,title,keys,notital,titleH) {
    if(!JSONData)
        return;
    //转化json为object
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

    var excel = "<table>";

    //设置表头
    var row = notital?"":"<tr><th  style='border: 1px solid #000000;height:36px;line-height:36px;' align='center' colspan='"+title.length+"'>"+(titleH?titleH:"卷内文件目录")+"</th></tr><tr>";

    if(title)
    {
        //使用标题项
        for (var i in title) {
            row += "<th  style='border: 1px solid #000000;height:36px;line-height:36px;' align='center'>" + title[i] + '</th>';
        }

    }
    else{
        //不使用标题项
        for (var i in arrData[0]) {
            row += "<th  style='border: 1px solid #000000;height:36px;line-height:36px;' align='center'>" + i + '</th>';
        }
    }

    excel += row + "</tr>";

    //设置数据
    for (var i = 0; i < arrData.length; i++) {
        var row = "<tr>";
        for(var k in title){
          if(!keys[k]){
            row+= "<td style='border: 1px solid #000000;height:36px;line-height:36px;MSO-NUMBER-FORMAT:\"\@\"'></td>"
          }else{
            row += "<td  style='border: 1px solid #000000;height:36px;line-height:36px;MSO-NUMBER-FORMAT:\"\@\"' align='center'>"+arrData[i][keys[k]]+"</td>"
          }
        }
        // for (var index in arrData[i]) {
        //     //判断是否有过滤行
        //     if(filter)
        //     {
        //         if(filter.indexOf(index)==-1)
        //         {
        //              var value = arrData[i][index] == null ? "" : arrData[i][index];
        //              row += '<td>' + value + '</td>';
        //         }
        //     }
        //     else
        //     {
        //          var value = arrData[i][index] == null ? "" : arrData[i][index];
        //          row += "<td align='center'>" + value + "</td>";
        //     }
        // }
        excel += row + "</tr>";
    }

    excel += "</table>";

    var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += "{worksheet}";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";


    var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

    var link = document.createElement("a");
    link.href = uri;

    link.style = "visibility:hidden";
    link.download = FileName + ".xls";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}