12月29

通过原生js处理后台返回的文件流

| |
16:25Web开发  From: 本站原创
最近在做项目时有一个这样需求,上传文件需要显示预览,当我了解之后,我以为和普通的下载一样呢,结果后台返回的是文件流格式,据说这是因为后台是分布式部署,不能持久化存储,没办法,只能前端来处理这个文件流了,用ajax请求图片资源,服务器以文件流的形式返回。

1、返回类型需要设置为“blob”,所以需要用原生ajax,不能使用jq(原因:jquery将返回的数据转换为了string,不支持blob类型)(当然,你也可以引入组件拓展jq的能力,我知道的有一个:jquery-ajax-blob-arraybuffer.js);

2、使用FileReader将文件流转换成base64格式;

3.1、然后通过模拟点击a标签下载该文件;

3.2、或者可以设置在img元素的src属性上,在当前页面显示出来。

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()


xhr.open('POST', CONTACT_ACTION_FILES_DOWNLOAD, true);
            xhr.setRequestHeader("Accept", "application/json;q=0.5");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.responseType = "blob";  // 返回类型blob
            // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
            xhr.onload = function () {
                // 请求完成
                if (this.status === 200) {
                    var blob = this.response;
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);  // 转换为base64,可以直接放入a表情href
                    reader.onload = function () {
                        $("#imgTest").attr("src", reader.result);
                    }
                }
            };
// 发送ajax请求
xhr.send("filePath=" + filePath);

下载文件
export const downloadStream = (method = 'GET', url, downloadName) => {
  const ctoken = getCookie('AIB_TOKEN')
  if (ctoken) {
    let xmlResquest = new XMLHttpRequest();
    xmlResquest.open(method, url, true);
    xmlResquest.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    //这里需要在请求头添加该参数,已防止CSRF
    xmlResquest.setRequestHeader("csrfToken", hashStr(ctoken));
    xmlResquest.responseType = "blob";
    xmlResquest.onload = function (oEvent) {

      let content = xmlResquest.response;
      let elink = document.createElement('a');
      elink.download = downloadName;
      elink.style.display = 'none';
      let blob = new Blob([content]);
      elink.href = URL.createObjectURL(blob);

      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    };
    xmlResquest.send();
  }

}

来源:Heck's Blog
地址:https://www.heckjj.com/post/576/
转载时须以链接形式注明作者和原始出处及本声明,否则将追究法律责任,谢谢配合!
阅读(44) | 评论(0) | 引用(0)