获取 blob 实现不跳转下载

最新推荐文章于 2024-04-07 15:29:50 发布

猿如意

最新推荐文章于 2024-04-07 15:29:50 发布

阅读量777

点赞数

分类专栏： javascript blob 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_37485170/article/details/128968739

版权

javascript 同时被 2 个专栏收录

1 篇文章

订阅专栏

blob

1 篇文章

订阅专栏

该文章介绍了一种在开发中替代window.open进行文件下载的方法，通过获取目标文件的blob，利用Promise处理异步请求，然后借助navigator对象的msSaveOrOpenBlob方法（针对IE）或创建隐藏的a标签来实现文件的保存和重命名，特别处理了Firefox浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目背景

开发过程中会遇到下载功能，window.open有时候无法满足需求，所以用获取blob实现不跳转下载

具体实现

/**
 * 获取 blob 实现不跳转下载
 * @param  {String} url 目标文件地址
 * @return {Promise}
 */
const getBlob = (url) => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };
    xhr.send();
  });
}
/**
 * 保存
 * @param  {Blob} blob
 * @param  {String} filename 想要保存的文件名称
 */
const saveAs = (blob, filename) => {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    let link = document.createElement('a');
    let 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);
  }
}
/**
 * 下载--获取文件 Blob，然后下载重命名
 * @param  {String} url 目标文件地址
 * @param  {String} filename 想要保存的文件名称
 */
const downLoadRemoteFile = (url, filename) => {
  getBlob(url).then(blob => {
    saveAs(blob, filename);
  });
}

export default downLoadRemoteFile;