前端“花式”下载 文件大法 小结

数据源：Blob

function saveFileToBlob(blob, tagFileName, fileType) {
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    downloadElement.download = (tagFileName ? tagFileName : moment(new Date().getTime()).format('YYYYMMDDhhmmss')) + '.' + fileType; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成后，移除元素
    window.URL.revokeObjectURL(href);
}

数据源：Base64

function saveFileToBase64(urlData, type) {
    // 去掉url的头，并转化为byte
    var bytes = window.atob(urlData);
    // 处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    var blob = new Blob([ab], {
      type: 'application/json'
    });
    //引用上文下载二进制流的方法
    saveFileToBlob(blob, '', type);
}

数据源：Link

function saveFileToLink(url, fileName, type, fn) {
    var xhr = new XMLHttpRequest();
    url = url.includes('https:') ? url.replace('https:', '') : url.replace('http:', '');
    xhr.open('get', url, true);
    xhr.setRequestHeader('Content-Type', 'application/' + type);
    xhr.setRequestHeader("If-Modified-Since", "0");
    xhr.responseType = "blob";
    xhr.onprogress = function (e) {
      //文件下载进度
      if (fn && typeof fn == 'function') {
        fn(e); //监听文件下载进度;
      }
    }, xhr.onload = function () {
      if (this.status == 200) {
        //接受二进制文件流
        var blob = this.response;
        saveFileToBlob(blob, fileName, type);
      }
    }, xhr.send();
}