本文的前提是:后台给的是一个可以下载的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. IdentityServer4 密码模式实现

    1.  修改 Config.cs using System.Collections; using System.Collections.Generic; using IdentityServer4.M ...

  2. SQL 高效的万能分页存储过程

    代码如下: USE [Blog] IF OBJECT_ID('Proc_Paging', 'P') IS NOT NULL --删除同名存储过程 DROP PROC Proc_Paging GO CR ...

  3. CSS初窥

  4. 【C#小知识】C#中一些易混淆概念总结(八)---------解析接口 分类: C# 2014-02-18 00:09 2336人阅读 评论(4) 收藏

     这一篇主要来解析关于面向对象中最总要的一个概念--接口. 对于接口来说,C#是有规定使用Interface关键字来声明接口.它的声明是和类一致的.可以说接口就是一个特殊的抽象类.如下代码: cl ...

  5. 一分钟让你学会使用Android AsyncTask

    AsyncTask相信大多数朋友对它的用法都已经非常熟悉,这里记录一下主要是献给那些刚刚接触的Android 或者AsyncTask的同学们,高手请绕道. AsyncTask类是Android1.5版 ...

  6. Git版本控制原理和常用指令说明

    平时在Android Studio开发Android项目,习惯了点击右键或图标直接拉新fetch,pull,commit和push.但是必要的时候还得在终端输入命令行.比如正在开发新版本v3.0,老板 ...

  7. vue-cli3.0配置接口代理

    根目录 新建   vue.config.js 文件,自动加载配置. // 作为配置文件,直接导出配置对象即可 module.exports = { devServer: { // 设置主机地址 hos ...

  8. VMware Workstation 11 中 Ubuntu 14.04 的 VMware Tools 问题 :没有显示共享文件夹

      症状:主要表现在Win7中用VM11安装的Ubuntu14.04中,安装完自带的VMware Tools之后,/mnt/hgfs 中没有前面已经设置好的共享文件夹.   仔细查看了安装过程,发现在 ...

  9. [C语言]声明解析器cdecl修改版

    一.写在前面 K&R曾经在书中承认,"C语言声明的语法有时会带来严重的问题.".由于历史原因(BCPL语言只有唯一一个类型——二进制字),C语言声明的语法在各种合理的组合下 ...

  10. Mac 硬盘中各个文件夹详解

    打开Macintosh HD你会发现内中有四个文件夹(一般情况下,隐藏文件夹是不可见的,而且,可能会更多,比如安装xcode后会有developer文件夹). 分别有——应用程序(Applicatio ...