原生ajax(带请求头header)下载文件 or 导出Excel 文件

为什么写这篇文章,是因为jquery 的坑。
jquery 封装的ajax 返回的数据类型没有 流的形式;
直接下载 可以用 window.location.href = url 或者 window.open(url),还可以 js 模拟form表单提交
但是如果 还要带 头部信息(如:token) 上面的方法就不行了,只能选择 原生 ajax 了。

一、后端以流的形式返回图片显示在网页端口

	 var url = serverUrlBase + "/server/images/" + mapid + "/files/png";
     var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = "blob";
      xhr.setRequestHeader("tokenId", "your token");
      xhr.onload = function() {
          if (this.status == 200) {
              var blob = this.response;
              var img = document.createElement("img");
              img.onload = function(e) {
                  window.URL.revokeObjectURL(img.src); 
              };
              img.src = window.URL.createObjectURL(blob);
              $("#imgcontainer").html(img);    
          }
      }
      xhr.send();

参考资料:https://www.cnblogs.com/cdemo/p/5158663.html

二、导出Excel

后端 POI ,具体就不写了,网上资料多的是;

function download() {
    var url = 'download/?filename=aaa.txt';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口
    xhr.responseType = "blob";    // 返回类型blob
    xhr.setRequestHeader("tokenId", "your token");
    // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
    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 = '用户信息.xls';
                a.href = e.target.result;
                $("body").append(a);    // 修复firefox中无法触发click
                a.click();
                $(a).remove();
            }
        }
    };
    // 发送ajax请求
    xhr.send()
}

想要了解其他 原生ajax 请求参数 等知识的请看 原生js实现ajax请求(带请求头header)和数据传参过程代码这篇文章;

参考资料:

https://my.oschina.net/watcher/blog/1525962

https://www.jianshu.com/p/9c4fac35726e

你可能感兴趣的:(前端)