怎么去控制浏览器对资源文件的处理行为
浏览器是怎么处理文件链接的
通常当用户打开一个资源的url
,如果浏览器支持这个格式的文件的情况下,浏览器会尝试去再页面里展示它而不是直接下载。例如一张图片(jpg, png, gif等
),几乎所有浏览器都会去将图片在浏览器里面展示。
对于压缩格式的文件(zip, tar, gzip等
)浏览器总是会直接去下载它们,另外一些格式的文件,根据浏览器的不同也会有差异的处理方法,例如Microsoft Word
文件(doc, docx
)在ie
浏览器下通常会在浏览器中展示,但是其他浏览器几乎都会直接下载它,同样的对于PDF
文件chrome
有自己的pdf 转换器
它会尝试去在浏览器上展示该文件。
强制下载文件
对于浏览器这种行为,一般情况下是可以接受的,因为用户可以在浏览器显示文件后将文件保存到电脑中,但是一些情况下用户可能希望文件直接被下载而不是在浏览器中被打开,比如有时候用户想去下载一个歌曲,但是浏览器可能回去播放该音频。那么怎么让浏览器强制去下载文件要怎么做呢
a标签的download属性
html5
中 a
标签新增了 download
属性,该属性指示浏览器下载url
的内容而不是导航到url
,因此如果配置了此属性用户会直接下载url
的内容。作为开发如果想直接触发该事件我们可以直接用代码模拟a标签和点击事件
const link = document.createElement('a');link.addEventListener('click', function() {link.download = xxx;link.href = xxx;});const e = document.createEvent('MouseEvents');e.initEvent('click', false, false);link.dispatchEvent(e);
download
属性只在同域时候有效,当跨域请求时候该属性将会被忽略。- 当前并非所以浏览器都支持该属性,需要浏览器考虑兼容性。
改变资源格式
浏览器会根据资源类型去判断是否支持,如果支持时会尝试去在页面上展示该资源。浏览器判断资源类型是根据返回头Content-Type
的值,因此一方面我们在服务端可以设置返回头字段为文件流'Content-Type': 'application/octet-stream'
,或者根据一些具体资源直接压缩后传输,浏览器不能分析zip
之类的压缩文件所以会直接去下载它们。
配置Content-Disposition
在HTTP场景中,Content-Disposition
消息头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。
inline
默认参数表示消息体会以页面的一部分或者整个页面的形式展示。attachment
消息体应该被下载到本地,将参数filename
的值预填为下载后的文件名
因此当我们希望该资源被直接下载时候,我们可以设置返回头Content-Disposition
的值为attachment
。
//exampleContent-Disposition: attachment; filename="fname.ext"
这里设置名称时候,要注意下filename
的编码格式。
用户自己在浏览器设置
浏览器既然定义了该行为,根据浏览器的不同用户可能在设置页面去配置某些格式的文件是否希望浏览器去展示该文件。一些有争议的情况下,你也可以提示用户自己根据需求去设置这些参数。
怎么去控制浏览器对资源文件的处理行为相关推荐
- 页面加载速度-合并资源文件
前言 一直觉得自己的博客站点页面加载很慢, 就想着去优化一下. 呐, 下图是一次文章页面的加载, 需要2.5s. 其中 js 文件就有18个. 众所周知, 浏览器对资源文件的并行下载数量是有限制的(不 ...
- php在浏览器输入路径,关于在sublime text 3 中配置一键浏览器打开php文件,并且是在localhost 本地服务器路径下...
如题,如何在sublime text 3 中配置出像dreamweaver 中那样的通过f12快捷键来在浏览器打开浏览php文件,而且是在localhost路径下. 在segmentfault得到一个 ...
- .Net资源文件全球化
I:本博文代码示例效果图 好久没来写随笔了.不多说先上大饼! 跟着直接上 [代码下载地址] II:ASP.NET 资源文件介绍 在ASP.NET特殊文件夹内有那么两个不太引人注意,他们分别是Ap ...
- Struts2的资源文件和国际化(i18n)
文章目录 资源文件的命名 资源文件基名的指定 struts.xml 文件指定资源文件的基名 struts.properties 文件指定资源文件的基名 通过标签 i18n 指定资源文件的基名 资源文件 ...
- 【netcore基础】wwwroot下静态资源文件访问权限控制
本文参考如下博问 https://q.cnblogs.com/q/107836 业务要求 上传的资源文件(.mp3 .mp4等)只有购买了之后才能有权限访问,所以对上传的资源文件目录进行访问权限控制 ...
- vue-cli项目布署问题解决:空白页、静态资源文件404错误、refrenceError:promise未定义(部分浏览器不支持ES6语法)
(前言:文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式) 首先简单理解webpack打包: 个人理解:项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码 ...
- chrome浏览器加载css、js等静态资源文件的坑
2019独角兽企业重金招聘Python工程师标准>>> 注意一点:在开发过程发现chrome加载的静态资源文件不是最新,则手工清除缓存和cooike再次刷新就可以了.原因是chrom ...
- 网络:浏览器静态资源缓存机制
一.前言 为什么需要缓存? 缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一 ...
- 浏览器页面资源加载过程与优化
评价页面性能好坏的核心之一就是页面的加载速度,而页面加载速度的关键就是页面资源的加载.本文将从浏览器浏览器页面资源加载过程展开分析,来引出页面关键请求路径的概念,并给出如何优化该关键请求路径的一些方法 ...
最新文章
- linux 网络传输压塑文件,萌新的Linux学习之路(十一)文件压缩传输
- 970计算机技术基础,2017年武汉大学测绘遥感信息工程国家重点实验室970计算机技术基础考研强化模拟题...
- tensorflow详解-tf.nn.conv2d(),tf.nn.max_pool()
- 重入锁、死锁、活锁、公平非公平锁……一下子都给你屡清楚了
- 八、给小白看的第一篇Python基础教程
- python多个装饰器执行顺序_Python面试题之多个装饰器执行顺序
- Java中的字符串常量池详细介绍
- [pytorch、学习] - 3.13 丢弃法
- 计算机技术如何设计酶,百人学者Nature Chemical Biology发文,发现一种设计酶的新方法...
- [ 转载 ] Java基础12--基础学习总结——数组
- Java 8 新特性 Stream类的collect方法
- cmake list all directories
- php股票预警,很准的股票底部预警选股指标 通达信公式(附图)
- 15个漂亮的企业网站设计案例欣赏
- 30天自制操作系统——自写设计
- 夏天来了,教你怎么选西瓜
- js对象常用方法总结
- UE4 用C++构建自定义材质 完成视频抠像
- metatrade4索罗斯都要用到的外汇交易术
- 广州百田笔试题(武大专场)