图片链接或pdf链接通过浏览器打开时，有时可以直接预览，有时却是下载，为什么？

在前端开发中，有时候需要对一些文件链接进行特殊处理，比如对于一些图片链接或者PDF链接，有时我们需要通过浏览器打开进行预览，有时又不希望通过浏览器进行打开，而是希望能够直接下载到本地。但现实效果却往往跟我们相反，我们希望浏览器打开时，他却直接下载，我们希望浏览器下载时，他反而又在新的标签页直接打开文件。

其实造成这种情况，和响应头里 content-disposition 的属性值有关， content-disposition 是 MIME 协议的扩展，其作用就是用来处理一些文件的显示问题， content-disposition的值为inline时，表示它可以显示在网页内，或作为网页，此时浏览器会自动进行预览， content-disposition的值为attachment时，表示它应该下载，大多数浏览器呈现“另存为”对话框，如果filename存在值，也会预填入文件名。

了解了相关原理，就很好实现自己想要的方式了。如果只是针对个人电脑，可以通过下载一些浏览器插件，通过更改响应头 content-disposition的值，进而实现自己想要的效果，但是如果是发布到生产，供其他用户使用，就需要要求后端开发按照自己的需求配置相关文件响应头中content-disposition的值，因为不可能要求每个用户都去安装相应的插件。

图片链接或pdf链接通过浏览器打开时，有时可以直接预览，有时却是下载，为什么？相关推荐

为什么浏览器中有些文件点击后是预览，有些是下载
今天给大家分享两个比较有用的浏览器行为与预期不一致的现象,这两个问题其实并不是什么难题,但在工作中发现不少人被难住了,在我的印象中至少有三位同事在群里问这样的问题,上周又有同事被此现象困住了,所以我觉 ...
微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
博客园在微信内置浏览器打开时添加微信赞赏码功能
我的博客开通了赞赏,看右侧悬浮[打赏],很容易弄,文末有链接. 另外,在微信中打开时,博客正文底部增加微信赞赏码,在微信内置浏览器打开时,长按图片识别,直接可以赞赏. 这本人自己摸索的,未参考任何博文 ...
解决Chrome或Microsoft Edge浏览器打开时自动跳转到hao123
解决Chrome或Microsoft Edge浏览器打开时自动跳转到hao123 打开chrome.exe或msedge.exe的安装路径右键桌面快捷方式或者开始页面上的快捷方式: 选择更多: 打开 ...
jupyter lab在浏览器打开时空白
Jupyter lab是jupyter notebook的升级版,因此,想体验一下Jupyter lab的界面.在Anaconda上运行jupyter lab后,默认打开IE浏览器,IE浏览器打开时, ...
浏览器显示海康摄像头实时预览画面纯前端解决方案
浏览器显示海康摄像头实时预览画面纯前端解决方案将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流,并将实时视频流通过 express 服务生成 http 长链接或 ws ...
小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...
IE浏览器里面链接点击在Chrome浏览器打开
常用网址汇总成一个网页,需要可以选择chrome或者IE浏览器打开,网址都是IP地址,基于IE浏览器开发,因此默认选择IE浏览器打开,跳转到chrome浏览器打开. <!DOCTYPE html ...
网页链接无法使用微信内置浏览器打开的解决方案，实现微信跳转外部浏览器打开网页
最近很多做微信推广的朋友经常会问我为什么网页链接在微信内转发很容易被拦截,问我有没有办法解决.其实这并不难,只要我们实现微信跳转功能即可,下面给大家说说如何实现微信跳转外部浏览器的功能. 功能目的生 ...

图片链接或pdf链接通过浏览器打开时，有时可以直接预览，有时却是下载，为什么？

图片链接或pdf链接通过浏览器打开时，有时可以直接预览，有时却是下载，为什么？相关推荐

最新文章

热门文章