js下载文件
本文的前提是:后台给的是一个可以下载的url的情况下的下载:
怎样的文件url才能触发浏览器的下载行为?(转自SF)
能触发浏览器下载的url有两类:
response header中指定了Content-Disposition为attachment,它表示让浏览器把响应体作为附件下载到本地 (一般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下载文件的更多相关文章
- 使用js下载文件
使用Echarts地图时,需要一些地图数据,到Echarts下载地图数据文件时,发现其下载是直接通过js下载,从其网站上扒下来的记录于此 FileSave.min.js网络地址:http://ecom ...
- 10.用js下载文件(需要后端链接)
用js下载文件 PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦. ...
- Js下载文件到本地(兼容多浏览器)
在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...
- 两种 js下载文件的步骤
----------------------------------引用地址链接------------------------------------------------- http://www ...
- 两种 js下载文件的方法(转)
function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObjec ...
- 两种js下载文件的方法(转)
function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObject("Microsoft.XM ...
- js 下载文件/导出
const url = '/sasd/fsd/xxxx/exportMailData2Excel'this.downloadFile(url, 'blob', this.isSearch) // 调用 ...
- 前端JS下载文件总结
Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...
- JS下载文件常用的方式
下载附件(image,doc,docx, excel,zip,pdf),应该是实际工作中经常遇到一个问题:这里使用过几种方式分享出来仅供参考; 初次写可能存在问题,有问题望指出 主要了解的几个知识 ...
- js+下载文件夹
一.此方法火狐有些版本是不支持的 window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********'; 二.为了解决火狐有些 ...
随机推荐
- collectd+influxdb+grafana
今天一天都在弄这个,最终发现在配置grafana的时候选择influxdb的版本时候选错了.(挠头~~~!!!) collectd的配置还算简单,基本看过配置文件就比较清楚. influxdb(Go ...
- 使用 spring.profiles.active 及 @profile 注解 动态化配置内部及外部配置
引言:使用 spring.profiles.active 参数,搭配@Profile注解,可以实现不同环境下(开发.测试.生产)配置参数的切换 一.根据springboot的配置文件命名约定,结合ac ...
- leetcode-914-卡牌分组
题目描述: 给定一副牌,每张牌上都写着一个整数. 此时,你需要选定一个数字 X,使我们可以将整副牌按下述规则分成 1 组或更多组: 每组都有 X 张牌. 组内所有的牌上都写着相同的整数. 仅当你可选的 ...
- JavaScript 常见使用误区
JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...
- Oracle PL/SQL学习之基础篇(2)--例外
1.例外分类:系统例外.自定义例外 (1)系统例外,参见相关API文档 (2)自定义例外 定义自己的例外:就像自定义变量一样,类型为exception 抛出例外:使用raise抛出自定义例外 set ...
- redmine3.3.3 rake db:migrate 报错invalid byte sequence in US-ASCII (Argument Error) 解决方法
这个错误有点莫名其妙,系统默认的就是utf-8,可bundle就是不对.. rake db:migrate 结果没有任何错误,反而是网页passenger 提示了这个错误 参考:https://git ...
- Java之集合(二十三)SynchronousQueue
转载请注明源出处:http://www.cnblogs.com/lighten/p/7515729.html 1.前言 本章介绍阻塞队列SynchronousQueue.之前介绍过LinkedTran ...
- Windows10下搭建TensorFlow环境
转载请注明源出处:http://www.cnblogs.com/lighten/p/6753695.html 这篇文章介绍了一下在Windows上安装TensorFlow的步骤,主要是翻译了一下官方的 ...
- 【java排序】 选择排序,插入排序,希尔算法
一.选择排序 1.基本思想:在要排序的一组数中,选出最小的一个数与第一个位置的数交换:然后在剩下的数当中再找最小的与第二个位置的数交换,如此循环到倒数第二个数和最后一个数比较为止. 2.实例 3.算法 ...
- 【C#小知识】C#中一些易混淆概念总结(五)---------深入解析C#继承
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...