本文的前提是:后台给的是一个可以下载的url的情况下的下载:

怎样的文件url才能触发浏览器的下载行为?(转自SF

能触发浏览器下载的url有两类:

  • response header中指定了Content-Dispositionattachment,它表示让浏览器把响应体作为附件下载到本地 (一般Content-Disposition还会指定filename, 下载的文件默认就是filename指定的名字)

  • response header中指定了Content-Type 为 application/octet-stream(无类型) 或者 application/zip(下载zip包时)以及其它几个不常见类型 (其中还有浏览器差异),其中 application/octet-stream表示http response为二进制流(没指定明确的type), 需要下载到本地, 由系统决定或者用户手动指定打开方式。

在这种前提下,只需要浏览器请求了这个地址,都会自动下载,具体的方式如下:

1、iframe   加载请求此地址时会自动下载  //据说兼容先较好,推荐,使用的时候吧iframe设置为display;none即可

  <iframe name="hehe" src='下载url'></iframe>

2、a     点击请求此地址时会自动下载

  <a href="下载url">下载</a>

  H5的download属性 <a download href="下载url">下载</a> 这时候,如果返回的是img这种浏览器可以打开的文件时,也会下载(否则会直接打开)

3、form    发起submit请求此地址时会自动下载

<form
action="下载ur"
method="get"
>
<button type="submit">下载</button>
</form>

4、window.location.href  赋值为此地址时会自动下载 ,如果是其他地址,会跳转,但,当是下载的url,浏览器会发起请求,下载下来,并且不会改变本页的 window.location.href

  window.location.href = “下载url”

4、window.open      赋值为此地址时会自动下载 ,但会先打开新标签页再下载再关闭新标签页,体验不佳

  window.open = “下载url”

总之:只要是下载的url,只要让浏览器发起请求,都会实现下载的功能;具体是什么原因,有待后期的学习。(我司是汪大神,分分钟就说出了这个规律,想必必然有基础理论的支持,也许是HTTP请求、或者后台知识的)

js下载文件的更多相关文章

  1. 使用js下载文件

    使用Echarts地图时,需要一些地图数据,到Echarts下载地图数据文件时,发现其下载是直接通过js下载,从其网站上扒下来的记录于此 FileSave.min.js网络地址:http://ecom ...

  2. 10.用js下载文件(需要后端链接)

          用js下载文件 PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦. ...

  3. Js下载文件到本地(兼容多浏览器)

    在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...

  4. 两种 js下载文件的步骤

    ----------------------------------引用地址链接------------------------------------------------- http://www ...

  5. 两种 js下载文件的方法(转)

    function DownURL(strRemoteURL, strLocalURL){         try{             var xmlHTTP = new ActiveXObjec ...

  6. 两种js下载文件的方法(转)

    function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObject("Microsoft.XM ...

  7. js 下载文件/导出

    const url = '/sasd/fsd/xxxx/exportMailData2Excel'this.downloadFile(url, 'blob', this.isSearch) // 调用 ...

  8. 前端JS下载文件总结

    Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...

  9. JS下载文件常用的方式

    下载附件(image,doc,docx, excel,zip,pdf),应该是实际工作中经常遇到一个问题:这里使用过几种方式分享出来仅供参考; 初次写可能存在问题,有问题望指出 ​ 主要了解的几个知识 ...

  10. js+下载文件夹

    一.此方法火狐有些版本是不支持的 window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********'; 二.为了解决火狐有些 ...

随机推荐

  1. react-router-dom 手动控制路由跳转

    基于 react-router 4.0 版本,我们想要通过 JS 手动控制路由跳转,分三步: 第一步:引入 propTypes const PropTypes = require('prop-type ...

  2. OAuth 2.0 - Authorization Code授权方式详解

    I:OAuth 2.0 开发前期准备 天上不会自然掉馅饼让你轻松地去访问到人家资源服务器里面的用户数据资源,所以你需要做的前期开发准备工作就是把AppKey, AppSecret取到手 新浪获取传送门 ...

  3. POJ 1083

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 400 using na ...

  4. 剑指offer三十八之二叉树的深度

    一.题目 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 二.思路 递归,详见代码. 三.代码 public class So ...

  5. (转)python学习笔记4--数字类型与操作符

    原文:https://blog.csdn.net/lemonwyc/article/details/37558269 1. 同时赋值(Simultaneous Assignments) python支 ...

  6. (转) centos 7.0 nginx 1.7.9成功安装过程

    centos 7.0根目录 的目录构成 [root@localhost /]# lsbin dev home lib64 mnt proc run srv tmp varboot etc lib me ...

  7. Java之集合(十一)IdentityHashMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7381905.html 1.前言 查看JDK源码总是能发现一些新东西,IdentityHashMap也是Map的一 ...

  8. [转]ASP.NET MVC 4 最佳实践宝典

    原文:http://www.cnblogs.com/sonykings/archive/2013/05/30/3107531.html ASP.NET MVC最佳实践 本文档提供了一套旨在帮助创建最佳 ...

  9. 【转】如何选择Html.RenderPartial和Html.RenderAction

    Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...

  10. Hadoop HDFS概念学习系列之HDFS升级和回滚机制(十二)

    不多说,直接上干货! HDFS升级和回滚机制 作为一个大型的分布式系统,Hadoop内部实现了一套升级机制,当在一个集群上升级Hadoop时,像其他的软件升级一样,可能会有新的bug或一些会影响现有应 ...