摘要：浏览器是怎么处理文件链接的通常当用户打开一个资源的如果浏览器支持这个格式的文件的情况下，浏览器会尝试去再页面里展示它而不是直接下载。
浏览器是怎么处理文件链接的
通常当用户打开一个资源的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。
//example
Content-Disposition: attachment; filename="fname.ext"
这里设置名称时候，要注意下filename的编码格式。
用户自己在浏览器设置浏览器既然定义了该行为，根据浏览器的不同用户可能在设置页面去配置某些格式的文件是否希望浏览器去展示该文件。一些有争议的情况下，你也可以提示用户自己根据需求去设置这些参数。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95818.html
摘要：其关键路径如下图所示图缓存关键路径三关键路径之验证缓存浏览器发起一个请求，生成报文，先发送到缓存器，缓存器验证是否有本地缓存，缓存是否过期等，即图的第一条路径，称之为验证缓存。 一、证件照场景 拍一次证件照麻烦且费钱，因此每次拍的时候我们都会多留几张备用。这就是计算机世界的缓存，在现实世界中的写照。 如果某个行为很消耗资源，很麻烦，那在实现它的时候就顺便多保留几份，这种行为就是缓存。特...
摘要：接下来看看浏览器是怎么处理预测浏览器行为浏览器下载图片应该独立于的构建。那么相应的浏览器就会下载不可见的。因为如果浏览器在构建前开始下载，它是没有办法知道这张图片是不是需要展示在页面上。 原文链接：https://csswizardry.com/2018/... 背景资料 为了更好地控制产品主页缩略图的显示，（作者）团队选择了css的background-image而不是标签上能解决这...
前提 本文涉及几个知识点：fetch、caches、indexDB 等都不会详细介绍，仅对于其中某些点带过 一. 概念 serviceWorker，服务工作线程，顾名思义，只是作为工作线程存在，不掺和到JS主线程中来，介于 浏览器 & 服务器中间层，可拦截指定 client 所发起的所有请求 二. 用途 目前 PWA（Progress Web App） 的概念很火，大致就是让 web 也跟 app...
阅读 846·2021-11-23 09:51
阅读 1037·2021-11-15 17:57
阅读 1635·2021-09-22 15:24
阅读 785·2021-09-07 09:59
阅读 2183·2019-08-29 15:10
阅读 1792·2019-08-29 12:47
阅读 724·2019-08-29 12:30
阅读 3340·2019-08-26 13:51
