下载原理

下载原理很简单，就是模拟 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开发环境搭建

    姓名:陈中娇   班级:软件151 第一步:在Eclipse下面配置Maven环境: 一.使用spring boot新建maven工程不在需要建立maven web工程,只要一般的maven工程就好了 ...

  2. Navicat安装教程、建表教程

    1.安装教程: 转自:https://www.jianshu.com/p/5f693b4c9468 2.使用教程(建表操作): https://jingyan.baidu.com/article/e6 ...

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

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

  4. java——单例模式

    这个教程写的真好:https://blog.csdn.net/mnb65482/article/details/80458571 1. 什么是单例模式? 单例模式确保某个类只有一个实例. 单例类必须自 ...

  5. 2019.03.20 读书笔记 关于Reflect与Emit的datatable转list的效率对比

    Reflect public static List<T> ToListByReflect<T>(this DataTable dt) where T : new() { Li ...

  6. density peak聚类算法

    一个ppt很好讲解了density peak算法的要义:https://pan.baidu.com/s/1oCR-gF1o1kfV-L7HnIa8og 算法来源自论文:Clustering by fa ...

  7. Dropping tests

    题目链接:http://poj.org/problem?id=2976 Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  8. Java基础01-JVM内存分析

    JVM java虚拟机 java编译后的class文件就是在java虚拟机上运行的 1.栈区(stacksegment)存放函数的参数值,局部变量的值等,在超过这个变量的作用域时就会被系统自动释放掉存 ...

  9. python3+Appium自动化12-H5元素定位环境搭建

    前言 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原生控件进行元素 ...

  10. instancemethod, staticmethod, classmethod & abstractmethod

    实例方法.静态方法.类方法.抽象方法 1.  Python中方法的工作方式(How methods work in Python) A method is a function that is sto ...