文件导出

管理平台经常会遇到导出报表的功能，总结下实现方式。

平台返回下载链接

最简单的处理方式：

1. window.open(url,'_blank')
2. a标签下载
   <a href="xxx/xxx/xx.xx" download="filename">

     const ele = document.createElement('a');
     ele.setAttribute('href',res.url); //设置下载文件的url地址
     ele.setAttribute('download' , 'download');//用于设置下载文件的文件名
     ele.click();  

平台返回文件流

1. form表单方式

/**
*@param {[url]} url [get请求的url地址]
*@param {[Object]} data [请求参数：{name:value , name2:value2 , name3:value3}]
*/
function downLoadFile(url , data){
    var $form = $('<form  method="post" style="display:none" target="_blank"/>');
    $form.attr('action', url); //设置get的url地址
    for (var key in data) {//设置请求的参数
        $form.append('<input type="hidden"  name="' + key  + '" value="' + data[key] + '" />');
    }
    $form.appendTo('body').sumbit().remove();
}

2. Blob对象下载
   有些情况使用form表单方式导出，比如下载接口需要header鉴权。
   此时可以使用该导出方式。

function exportFileBlob(url,data,success,error){
        var request = new XMLHttpRequest();
        request.open('POST',Config.serverBase+url);
        request.onreadystatechange = function () {
            if(request.readyState === 4 ){
                if(request.status===Status.OK){
                    success(request.response);
                }else{
                    error()
                }
            }
        };
        request.setRequestHeader('Content-Type','application/json');
        request.setRequestHeader('token',window.localStorage.getItem("hjqman-token")?window.localStorage.getItem("hjqman-token"):"");
        request.responseType = "blob";
        request.send(data);
}

         function success (response){
            const blob = new Blob([response]);
            const fileName = '应用号列表'+moment().format('YYYYMMDD')+'.xls';
            if ('download' in document.createElement('a')) {
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                let url = URL.createObjectURL(blob);
                elink.href = url;
                document.body.appendChild(elink);
                elink.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(elink);
            } else { // IE10+下载
                navigator.msSaveBlob(blob, fileName);
            }
       }  

注意点：

1. 如果用Axios可以直接设置responseType: blob,但是 AJAX未封装该参数，所以需要用XMLHttpRequest。
   image.png
   参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType
2. URL.createObjectURL(blob)可以获取当前文件的一个内存URL,同步执行，createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
   参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/revokeObjectURL