js实现Excel导出功能

1. 使用get方式请求后台接口，能获取到导出文件的地址，此时就相当于浏览器打开一个新的链接

   <button type="button" id="export" class="btn"><i class="fa fa-download"></i>  导出</button>
   

    // 导出功能
   $('#export').on('click',function () {
   	/**
   	*这里是我拼接请求数据，具体请求数据看自己需求
   	*/
       var new_partsName = $('#addPartsName').val(); //配件名
       var brandName = $('#brandName').val(); //配件品牌
       var partsType = $('#partsType').val(); //品牌型号
       var partsUnit = $('#partsUnit').val(); //配件单位
       var purchasePrice = $('#purchasePrice').val(); //配件单价
       var laborCost = $('#laborCost').val(); //人工费
       var price = $('#price').val(); //配件费
       var partsPeriod = $('#partsPeriod').val(); //配件周期
       var addStatus = $('#addStatus').val(); //状态
       var isUse = $('#isUse').val(); //是否常用
       var remark=$('#addRemark').val() || null;
       var imgArr=[];
       var liNode=$('#uploadImgBox').find('li');
       for(var i=0;i<liNode.length;i++){
           imgArr.push($(liNode[i]).find('img').attr('src'));
       }
       // 请求参数
       data = {
           user_id: win.utils.getCookie('user_id'),
           session: win.utils.getCookie('session'),
           firstTypeId: $('#firstTypeName').val() || '',
           firstTypeName:$('#firstTypeName').find("option:selected").text()=="请选择一级配件类型"?'':$('#firstTypeName').find("option:selected").text(),
           secondTypeId: $('#secondTypeName').val() || '',
           secondTypeName:$('#secondTypeName').find("option:selected").text()=="请选择二级配件类型"?'':$('#secondTypeName').find("option:selected").text(),
           partsName:new_partsName || '',
           brandName: brandName || '',
           partsType:partsType || '',
           unit:partsUnit || '',
           purchasePrice:purchasePrice || '',
           laborCost:laborCost || '',
           price:price || '',
           partsPeriod:partsPeriod || '',
           picUrl:'',
           status:addStatus || '',
           isUse:isUse || '',
           remark:remark || ''
       };
       var dataArr=[];
       for(var key in data){
           dataArr.push(key+'='+data[key]);
       }
       /**
   	*以上是我拼接请求数据，具体请求数据看自己需求
   	*/
   	
       window.location.href=win.utils.services.exportPartsList+'?'+dataArr.join('&');
   });
   

2. 通过xhr请求导出

   //dataStr为参数，即导出数据的条件
   function download(dataStr) {
       var url = win.utils.services.exportPartsList+'?'+dataStr;
       var xhr = new XMLHttpRequest();
       xhr.open('get', url, true);        // 也可以使用POST方式，根据接口
       xhr.responseType = "blob";    // 返回类型blob
       // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
       xhr.onload = function () {
           // 请求完成
           if (this.status === 200) {
               // 返回200
               var blob = this.response;
               var reader = new FileReader();
               reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
               reader.onload = function (e) {
                   // 转换完成，创建一个a标签用于下载
                   var a = document.createElement('a');
                   a.download = 'data.xlsx';
                   a.href = e.target.result;
                   $("body").append(a);    // 修复firefox中无法触发click
                   a.click();
                   $(a).remove();
               }
           }
       };
       // 发送ajax请求
       xhr.send()
   }