js文件下载兼容主流浏览器+ie10+标准版！

最近项目中有需求兼容到ie10,其中涉及到文件下载，奉上代码给大家分享一下。如有不对之处，请多指教。

之前是采用a.click方式来执行下载，但是在windows7 - ie10上下载无反应，后面才写的以下方式。

download.js 如下

import util from "@/js/util";
function download(url, filename, responseBlod) {
  // responseBlod 没有文件名情况下传入"bold"自动读取response响应头数据
  getBlob(url, function (blob, name) {
    if (!name) {
      saveAs(blob, filename);
    } else {
      saveAs(blob, name);
    }
  }, responseBlod);
}
function getBlob(url, cb, responseBlod) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (xhr.status === 200) {
      if (responseBlod) {
        let response = util.getHeaderObj(xhr);
        let name = response["content-disposition"].split(";")[1].split("=")[1];
        cb(xhr.response, name);
      } else {
        cb(xhr.response);
      }
    }
  };
  xhr.send();
}
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    try {
      navigator.msSaveOrOpenBlob(blob, filename);
    } catch (e) {
      console.log(e);
    }
  } else {
    var link = document.createElement("a");
    var body = document.querySelector("body");
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;
    // fix Firefox
    link.style.display = "none";
    body.appendChild(link);
    link.click();
    body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
  }
}

export default download;

util.getHeaderObj(xhr);方法是动态文件名未知的情况下，自动读取response响应头数据里面的文件名称。

getHeaderObj(req) {
    // 获取响应头信息
    let headers = req.getAllResponseHeaders().toLowerCase();
    // 由于返回的是用\r\n来进行分割的字符串，需要做转换
    let arr = headers.trim().split(/[\r\n]+/);
    let headerMap = {};
    arr.forEach(function (line) {
      let parts = line.split(': ')
      let header = parts.shift()
      let value = parts.join(': ')
      headerMap[header] = value
    })
    return headerMap;
  },

使用方式

download(url, fileName); // 自定义文件名方式


url // 文件下载路径
fileName // 文件名称 没有传 ""
bold  // 需要获取响应头文件名情况下传"bold" 否则不传

download(url, "", "bold"); // 获取响应头文件名方式

js文件下载兼容主流浏览器+ie10+标准版！

猜你喜欢