前端导出功能的两种方式

第一种：后台传文件流，

html部分代码

<div>
             <button name="export" class="btn btn-info modal-dialog export" id="exportSQLExcel">导出   </button>
            </div>

js部分代码

var token = '', exportid = undefined;

//导出
 $(".modal-content #exportSQLExcel").click( function (e){
  var requestUrl = 'http://172.xxx.xxx.xxx:9000/mc/sql/sqlresultexport.do?token=' + $.cookie('token') + '&id=' + exportid + '&islatest=true';
  httpRequestExport(requestUrl, function(result) {
   console.log(result);
  }, 'get')
 });

   //导出功能公共方法
 function httpRequestExport(uri, callback, method, param) {
  var xhr = new XMLHttpRequest();
  var method = method || 'get';//请求方式get/post
  var param = param || null;//请求参数
  
  xhr.open(method, uri);
  xhr.responseType = "blob";//设置相应信息格式为blob
  xhr.setRequestHeader("Cache-Control", 'no-cache, no-store,max-age=0, must-revalidate');
  xhr.setRequestHeader("Pragma", 'no-cache');  //根据浏览器返回的请求头进行修改
  xhr.setRequestHeader("Expires", '0');
  xhr.setRequestHeader("Content-Type",  'application/json;charset-UTF-8');
  xhr.onload = function() {
   //如果Content-Type不是application/vnd.ms-excel,那么请求出现了异常     
   if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === "application/vnd.ms-excel;charset=utf-8") {
    var currentDate = new Date();//time.toLocaleDateString(); time.getHours(); time.getMinutes(); time.getSeconds();
    var currentTime = currentDate.toLocaleDateString();
    var currentHour = currentDate.getHours();
    var currentMinute = currentDate.getMinutes();
    var currentSecond = currentDate.getSeconds();
    var fileNameTemp = $.trim ($.trim(TitleTemp) + "\-" + $.trim(currentTime) + "\ " + $.trim(currentHour) + "\：" + $.trim(currentMinute) + "\：" + $.trim(currentSecond)) ;
    var type = xhr.getResponseHeader('Content-Type'), filename = fileNameTemp + '.xlsx';
    var blob = new Blob([xhr.response], {
     type: type
    }); // 将服务端返回的文件流excel文件
    downLoadBlobFile(blob, filename);
    xhr.success = true;
    xhr.message = '';
   } else {
    xhr.success = false;
    xhr.message = '导出失败';
   }
   
   if (callback && typeof callback == 'function') callback(xhr);
  }
  
  xhr.onerror = function() {
   xhr.success = false;
   xhr.message = '导出失败';
   if (callback && typeof callback == 'function') callback(xhr);
  }
  xhr.send(param);
 }

//触发文件下载
 function downLoadBlobFile (blob, fileName) {
  if (window.navigator.msSaveOrOpenBlob) { // IE10
   navigator.msSaveBlob(blob, fileName);
  } else {
   var link = document.createElement('a');
   link.style.display = 'none';
   link.href = URL.createObjectURL(blob); //创建一个指向该参数对象的URL
   link.download = fileName;
   link.click(); // 触发下载
   URL.revokeObjectURL(link.href); // 释放通过 URL.createObjectURL() 创建的 URL
  }
 }

第二种：后端给一个url链接

js部分代码

    //后台传url的导出方式，会自动生成一个导出标签。
// function exportData(sSource, aoData, fnCallback) {
      var pageindex = 0;
      var pagesize = 0;
      //console.log(aoData);
      for(let item in aoData){
          if(aoData[item].name=="iDisplayStart"){
              pageindex=aoData[item].value;
          }else if(aoData[item].name=="iDisplayLength"){
              pagesize=aoData[item].value;
          }
      }
      pageindex = pageindex / pagesize + 1;
//      //查询条件称加入参数数组
//      token = $.cookie('token');
//      var sFilter = '?token=' + token;
//      sFilter += "&id="+id;
//      sFilter += "&islatest="+islatest;
//      var url = sSource + encodeURI(sFilter);
//      getData(url,
//          function (jsonData) {
//           if(jsonData && jsonData.success){
//            var domain = context.$config.domin.substring(0,context.$config.domin.length-4);
//            var url= domain + jsonData.data.downloadUrl;
//            if($('#downloadcsv_serviceFunc').length<=1)
//            $('.body-content').append("<iframe id=\"downloadcsv_serviceFunc\" style=\"display:none\">");
//            $('#downloadcsv_serviceFunc').attr('src',url);
//           }else{
//            context.$viewUI.message.show(jsonData.message,closeBtn,langData["tips"]);
//           }
//
//          }
//      );
//  }