下载原理

下载原理很简单，就是模拟 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. Jira的安装使用

    1.什么是JIRA JIRA是目前比较流行的基于Java架构的管理系统,由于Atlassian公司对很多开源项目实行免费提供缺陷跟踪服务,因此在开源领域,其认知度比其他的产品要高得多,而且易用性也好一 ...

  2. IOS Intro - Property Synthesis

    http://www.thecodecrate.com/ios/objective-c/objective-c-property-synthesize/ 01. atomic              ...

  3. windows当代理服务器-CCProx的使用

    参考 https://jingyan.baidu.com/article/0f5fb099ef3a2c6d8234ea75.html 在ubuntu下设置网络代理,选择手动方式

  4. python 自动安装工具 setuptools(easy_install) 的使用

    1.下载安装 python 安装工具,下载地址:http://pypi.python.org/pypi/setuptools ,可以找到正确的版本进行下载. 2.解压缩后双击 ez_setup.py ...

  5. Java中的内存泄漏分析说明

    Java语言的一个关键的优势就是它的内存管理机制.你只管创建对象,Java的垃圾回收器帮你分配以及回收内存.然而,实际的情况并没有那么简单,因为内存泄漏在Java应用程序中还是时有发生的. 下面就解释 ...

  6. Spring Boot使用mongo的GridFS模块

    1. GridFS简介 GridFS是Mongo的一个子模块,使用GridFS可以基于MongoDB来持久存储文件.并且支持分布式应用(文件分布存储和读取).作为MongoDB中二进制数据存储在数据库 ...

  7. redis 读写锁实现

    一 先搞清楚读写锁要做什么. 基本就是 读读不互斥,读写互斥,写写互斥.可重入. 关于redis读写锁,我写了一次之后,总觉得很怪,然后就上网看到大神的redisson了,果断借鉴一番. 二 读行为 ...

  8. 介绍几个关于C/C++程序调试的函数

    最近调试程序学到的几个挺有用的函数,分享一下,希望对用C/C++的朋友有所帮助! 1. 调用栈系列下面是函数原型: 1 2 3 4 #include "execinfo .h" i ...

  9. Devexpress Xtrareport 打印报表

    需要引用 Using Devexpress.Xtrareport.UI: Using Devexpress.XtraPrinting.Localiztion 实例化报表,xtrareport my=n ...

  10. Entity Framework中IQueryable, IEnumerable, IList的区别[转]

    使用工具追踪EF生成的SQL 使用Entity Framework等ORM框架的时候,SQL对于使用者来说是透明的,往往很多人也不关心ORM所生成的SQL,然而系统出现性能问题的时候就必须关注生成的S ...