下载原理

下载原理很简单，就是模拟 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. 利用JPanel和JLabel设置背景图片

    //创建面板1,放置背景图片1 JPanel jPanelTop=new JPanel(); jPanelTop.setBounds(,-,,); //x=0,y=-5用来设置面板距离窗体左上角的距离 ...

  2. linux防火墙添加端口

     防火墙配置文件: /etc/sysconfig/iptables 1.使用命令查看端口开启情况(下图为安装时未选择开启防火墙) [root@fullstack ~]# iptables -L -n ...

  3. P3272 [SCOI2011]地板（插头DP）

    [题面链接] https://www.luogu.org/problemnew/show/P3272 [题目描述] 有一个矩阵,有些点必须放,有些点不能放,用一些L型的图形放满,求方案数 [题解] ( ...

  4. P4824 [USACO15FEB]Censoring (Silver) 审查(银)

    传送门 一个串的匹配肯定考虑KMP 那就暴力KMP 记录一下到每个字符时匹配的位置 找到一个符合的串就标记然后暴力回跳 感觉好像太暴力了... #include<iostream> #in ...

  5. redis 集合

    > SADD myset1 a b c (integer) > SADD web maiziedu.com (integer) > SADD web maiziedu.com (in ...

  6. asp.net mvc AjaxHelper 获取 JSON 的方法

    默认的 AjaxHelper 没有提供获取 JSON 的方法,只提供获取 html 然后更新指定元素的方法,不过,经测试发现还是有办法的,由于 AjaxOptions 对象的 OnSuccess 属性 ...

  7. JDK Throwable

    Throwable 1. 使用大量数组和List常量: private static final StackTraceElement[] UNASSIGNED_STACK = new StackTra ...

  8. Autel MaxiSYS Pro Diagnostic System

    The Autel Maxisys Pro Diagnostic System is a complete OEM-level diagnostic system that enables the s ...

  9. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  10. linux在命令符界面如何浏览网页

    1.介绍 w3m是个开放源代码的命令行下面的网页浏览器. 它支持表格.框架.SSL连线.颜色.如果是在适当的terminal上,甚至还支持"inline image". 这个软件通 ...