前端处理文件下载(带请求头)

文件下载,token校验

文件下载通常使用a标签进行处理,本次介绍的是通过blob来实现流文件下载,原因是后台网关校验通过请求头拿token,原来的操作无法实现。在度娘搜索了半个小时候找到了靠谱方案,现在来摘抄一下;原文地址https://blog.csdn.net/elie_yang/article/details/79580533

            function createObjectURL(object) { return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); }
            var xhr = new XMLHttpRequest();
            var formData = new FormData();
            xhr.open('get','url');  //url填写后台的接口地址,如果是post,在formData append参数(参考原文地址)
            xhr.setRequestHeader("access-token", sessionStorage.getItem('access-token'));
            xhr.responseType = 'blob';
            xhr.onload = function (e) {
                if (this.status == 200) {
                    var blob = this.response;
                    var filename = "设备导出.xls";
                    console.log(this.response)
                     if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, filename);
                    } else {
                      var a = document.createElement('a');
                     var url = createObjectURL(blob);
                     a.href = url;
                     a.download = filename;
                     document.body.appendChild(a);
                     a.click();
                     window.URL.revokeObjectURL(url);
                    }
                    
                }
            };
            xhr.send(formData);

你可能感兴趣的:(前端处理文件下载(带请求头))