下载原理

下载原理很简单，就是模拟 a 标签的点击下载，我们都知道 ajax 不支持下载文件功能，是因为 ajax 只能用来传输字符型数据，所以在过去无法使用 ajax 来下载文件。

xhr2 可以把 response 保存为 blob，下载结束后，为这个 blob 创建一个 URL，跳转到这个URL，或使用 anchor element with download property ，浏览器会弹出保存框。如果文件很大的话，还需要用到 filesystem API，因为 blob 是存在内存中的。（来自知乎：鲁小夫）

简单的实现方式

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>sample</title>

</head>

<body>

  <button id='download'>下载</button>

  <span id='status'></span>

</body>

<script>

  var url = "http:// your files link";

  document.querySelector('#download').onclick = function() {

    document.querySelector('#status').innerHTML = '文件下载中...';

    fetch(url).then(res => res.blob().then(blob => {

      var a = document.createElement('a');

      var url = window.URL.createObjectURL(blob);   // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)

      var filename = res.headers.get('Content-Disposition');

      a.href = url;

      a.download = filename;

      a.click();

      window.URL.revokeObjectURL(url);

      document.querySelector('#status').innerHTML = '下载完成';

    }));

  };

</script>

</html>

关于 window.URL.createObjectURL(blob) 与 window.URL.revokeObjectURL(objectURL)

使用 javascript API -- fetch 实现文件下载功能的更多相关文章

  1. Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的JavaScript类库,以及为这 ...

  2. 【原创】web端高德地图javascript API的调用

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...

  3. ABP理论学习之Javascript API(理论完结篇)

    返回总目录 本篇目录 Ajax Notification Message UI block和busy 事件总线 Logging 其他工具功能 说在前面的话 不知不觉,我们送走了2015,同时迎来了20 ...

  4. 如何正确响应ArcGIS JavaScript API中图形的鼠标事件

    在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...

  5. 新一代Ajax API --fetch

    之前 师傅跟我提过 一个新的Ajax API  fetch 今天看到一篇关于fetch的文章,受益匪浅. XMLHttpRequest并不是专为Ajax而设计的,虽然各种框架对XHR的封装已经足够好用 ...

  6. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  7. 专门用于微信公众平台的Javascript API

    1 /**! 2 * 微信内置浏览器的Javascript API,功能包括: 3 * 4 * 1.分享到微信朋友圈 5 * 2.分享给微信好友 6 * 3.分享到腾讯微博 7 * 4.新的分享接口, ...

  8. PhantomJS：基于WebKit、开源的服务器端JavaScript API

    PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM ...

  9. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

随机推荐

  1. springboot整合dubbo注解方式

    工程结构: 主pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  2. Django之ORM其他骚操作 执行原生SQl

      Django ORM执行原生SQL # extra # 在QuerySet的基础上继续执行子语句 # extra(self, select=None, where=None, params=Non ...

  3. 在Javascript中 声明时用"var"与不用"var"的区别

    http://www.cnblogs.com/juejiangWalter/p/5725220.html var num = 0;function start() {    num = 3;} 只要一 ...

  4. git 合并某个提交commit到指定的分支上

    https://blog.csdn.net/anhenzhufeng/article/details/77962943 git checkout master git cherry-pick 62ec ...

  5. python+selenium 使用jinkens构建时，无法打开浏览器（已解决）

    inkens 我不用的是war包,就是直接丢在tomcat webapps文件夹就能生效的.因为不是安装,所以网上说把jinkens的服务改为管理员启动是不行的.下面一步步来解决这个问题吧. 1.找到 ...

  6. python 中is和= = 的区别

    Python中的对象包含三要素:id.type.value,其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值. is判断的是a对象是否就是b对象,是通过id来判断的: ==判 ...

  7. 在Docker中部署Asp.net core2.1以及修改发布

    https://blog.csdn.net/sd7o95o/article/details/80809734   本篇文章主要是如何在Docker容器中运行ASP.NET Core应用程序,以及修改系 ...

  8. ios中页面底部输入框，position:fixed元素的问题

    在安卓上点击页面底部的输入框,软键盘弹出,页面移动上移.ios上,软件盘弹出,输入框看不到了.让他弹出时让滚动条在最低部 var u = navigator.userAgent, app = navi ...

  9. 一些自己编写的简单的js

    图片在窗口内弹来弹去的效果 <div class="FrontAdv_float01-default" style="position: absolute;z-in ...

  10. SpringMVC中RequetContextListener

    来自:https://www.cnblogs.com/softidea/p/7068196.html 零.引言 RequetContextListener从名字结尾Listener来看就知道属于监听器 ...