JavaScript 用fetch 实现异步下载文件功能

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>
<body>
  <button id='btn'>下载</button>
  <span id='status'></span>
</body>
<script>
  var url = "http://localhost/sample/upload.php";
  document.getElementById('btn').onclick = function() {
    document.getElementById('status').innerHTML = '下载中';
    fetch(url).then(res => res.blob().then(blob => {
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(blob);
      var filename = res.headers.get('Content-Disposition');
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
      document.getElementById('status').innerHTML = '下载完成';
    }));
  };
</script>
</html>

总结

以上所述是小编给大家介绍的JavaScript 用fetch 实现异步下载文件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript利用fetch实现异步请求的方法实例

    JavaScript利用fetch实现异步请求的方法实例

    前言 相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求.下面话不多说,来一起看看详细的介绍吧. 先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.

  • JavaScript 用fetch 实现异步下载文件功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <button id='btn'>下载</button> <span id='status'></span> &

  • php+js实现的无刷新下载文件功能示例

    本文实例讲述了php+js实现的无刷新下载文件功能.分享给大家供大家参考,具体如下: 服务器端页面 步骤就是,设置头文件参数,然后读入并输出文件.下面代码的file_get_contents可以使用fread,fclose代替. download.php <?php $filename = $_GET['filename']; $path = __DIR__."/file/".$filename; Header( "Content-type: application/o

  • Ajax请求二进制流进行处理（ajax异步下载文件）的简单方法

    摘要: ajax请求一个二进制流(文件),转换为Blob进行处理或者下载保存文件 需求 管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载. 文件不大,页面放置"导出"按钮,点击按钮后弹出保存文件对话框保存 说明:第一种方法使用a标签直接可以满足大部分人需求,第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看 解决方案 方法一 请求文件的接口能改为GET则可以使用这种方

  • Android实现下载文件功能的方法

    本文所述为Android实现下载文件功能的完整示例代码,对于学习和研究android编程相信会有一定的帮助,尤其是对Android初学者有一定的借鉴价值. 完整功能代码如下: package com.test; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.URL; import java.net.URLConnection; import and

  • PHP使用CURL实现下载文件功能示例

    本文实例讲述了PHP使用CURL实现下载文件功能.分享给大家供大家参考,具体如下: 如果使用CURL下载从微信手机端上传的图片?参考下面代码 /** * CURL下载文件 成功返回文件名,失败返回false * @param $url * @param string $savePath * @return bool|string * @author Zou Yiliang */ public function downFile($url, $savePath = './uploads') { /

  • shell脚本实现ftp上传下载文件功能

    前段时间工作中需要将经过我司平台某些信息核验数据提取后上传到客户的FTP服务器上,以便于他们进行相关的信息比对核验.由于包含这些信息的主机只有4台,采取的策略是将生成的4个文件汇集到一个主机上,然后在这台主机上将文件上传的目标ftp服务器. 1,建立主机A到其他三台主机之间的信任关系,以便于远程拷贝文件 #生成主机A的本地认证秘钥,可以选择生成rsa或者dsa类型的秘钥,这里选取rsa [root@A ~]#ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa >/d

  • vue实现点击按钮下载文件功能

    项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button> <el-lin

  • JAVA实现下载文件功能的两种方法

    第一种方法: public HttpServletResponse download(String path, HttpServletResponse response) { try { // path是指欲下载的文件的路径. File file = new File(path); // 取得文件名. String filename = file.getName(); // 取得文件的后缀名. String ext = filename.substring(filename.lastIndexO

  • Python集成C#实现界面操作下载文件功能的全过程

    Python集成C#实现界面操作下载文件功能的全过程

    目录 〇.写在前面 一.这个功能是怎么样的 二.WinForm 端功能实现 1. 界面设计 2. 方法定义 三.Python 端功能实现 四.运行效果 五.存在问题 总结 〇.写在前面 你想的没错,Python 和 C# 其实都可以单独实现我们要实现的功能,这里笔者只是抱着实验及学习的态度去解决问题. 我是一个 C# 程序员,目前在学习 Python,对于 Python 得天独厚的胶水语言特性自然是必须要领略一番,于是就有了本文. 学会了 Python 调用 C# 的话,就能做很多想到和想不到的

  • C#异步下载文件

    C#异步下载文件

    在C#当中,利用WebClient这个核心类,可以轻易的打造一个下载器.但是这里想要强调的是,我们用的是异步操作.所谓异步,是相对于同步的概念而言的.比如Web中的Ajax就是基于异步的.它能够提供良好的用户体验,让用户在进行操作时,不感觉到"卡"(不阻塞UI线程),能够同时进行其它的操作并能够随意的切换到任务界面.在下载文件时,如果文件过大,我们用同步的下载方式进行下载会感觉程序"假死",其实程序在后台不断的运行,但我们看不到下载的过程.所以这时候使用异步方法能够

随机推荐