使用fetch实现文件下载

这个过程其实就是使用Fetch去模拟a标签的下载过程,代码示例如下:

<script>
    fetch('http://somehost/somefile.zip').then(
      res => res.bob()
    ).then(blob => {
      let a = document.createElement('a');
      let url = window.URL.createObjectURL(blob);
      let filename = 'myfile.zip';
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
      /*
      第一步:fetch接口获取其内容转化为blob对象;
      第二部:将blob对象使用reateObjectURL转化为ObjectURL,这个相等于下载地址的链接;
      第三步:创建一个a标签,并赋予ObjectURL,且执行一次click;
      第四步:通过revokeObjectURL回收ObjectURL;
      */ 
    })
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐