前端文件下载

前端文件下载方法

使用a标签

/**
 * 文件下载方法 使用a标签
 * 存在浏览器下载时，太快的话，会取消上次的下载请求
 * @param {*} href
 * @param {*} filename
 */
export function downloadFile(href, filename) {
  if (href) {
    let a = document.createElement('a');
    // 指定下载的文件名
    filename && (a.download = filename);
    a.href = href; //  URL对象
    const id = 'download' + Math.random();
    a.id = id;
    document.body.appendChild(a);
    a.click(); // 模拟点击
    URL.revokeObjectURL(a.href); // 释放URL 对象
    // document.body.removeChild(a);
    document.getElementById(id).remove();
  }
}

使用iframe标签

/**
 * 文件下载方法 使用iframe
 * 可解决浏览器下载时，太快的话，会取消上次的下载请求
 * @param {*} url
 */
function downloadFileIframe(url) {
  try {
    let eleIF = document.createElement('iframe');
    eleIF.src = url;
    eleIF.style.display = 'none';
    document.body.appendChild(eleIF);
    //防止下载2次
    setTimeout(function () {
      document.body.removeChild(eleIF);
    }, 1000);
  } catch (e) {
    console.log(e);
  }
}

二进制流

将接口完全请求回来的二进制流，在浏览器侧转换成文件下载。这种方案，如果下载的文件特别大的情况会导致浏览器内存特别大，不建议这种方案。

// 将url转成blob地址
fetch(url)
    .then(res => res.blob())
    .then(blob => {
        const a = document.createElement('a');
        // 将链接地址字符内容转变成blob地址
        a.href = URL.createObjectURL(blob);
        a.download = filename; // 下载文件的名字
        document.body.appendChild(a);
        a.click();
        // 下载完成后 清除占用的缓存资源
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
    });

参考文章：
通过动态创建a标签，循环批量下载文件所遇到的问题记录