下载原理

下载原理很简单，就是模拟 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. 7 . 动态sql-choose

    choose-when-otherwise 只能满足一个when 中的条件,互斥的条件,不能同时存在 mapper.xml <select id="selectstateByTitle ...

  2. 2.mybatis 的列名与数据库字段不对应

    mybatis 的列名与数据库字段不对应 1.别名 映射文件 : BlogMapper.xml <mapper namespace="com.xms.mybatis.mapper.Bl ...

  3. win7 宽带连接 711错误

    新装Win7系统,建立宽带连接后提示711错误,网上转一圈,方法不少,对症下药,不是很管用 以下是我总结的方法 win7 旗舰版 administration 用户 设置以下几个服务为手动或自动,并启 ...

  4. sharepoint_study_10

    描述:想页面添加一段脚本效果如图所示 图示: 代码(脚本编辑器): <div class="index-links"> <a class=" index ...

  5. BZOJ 2836 魔法树 链剖裸题~~

    正好练练熟练度..(刷水题谋财害命QAQ) #include<cstdio> #include<iostream> #define ll long long #define R ...

  6. hdu2066一个人的旅行(disjkstra)

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  7. sql运算符优先级及逻辑处理顺序--查询sql执行顺序

    sql逻辑处理顺序 --开启和关闭查询 --SET STATISTICS TIME ON---------------------------------------------请先来看看SET ST ...

  8. SQL---MySQL数据库---试炼

    1.需求 user表 temp表 user_temp_salary表 1.1 查找每个人在2018年前2个月的平均工资信息 SELECT b.`name` AS userName,c.name AS ...

  9. window系统下SVN服务器和客户端的搭建和使用

    SVN服务器下载地址: http://subversion.apache.org/packages.html 这里我选用VisualSVN server 服务端和 TortoiseSVN客户端搭配使用 ...

  10. STM32F3 浮点运算使用

    在keil中使用浮点运算的步骤:在程序中包含#include <math.h>