php部署网站,vue反向代理天地图地址,网络培训思想汇报,设计头条app官方网站前言 在实际项目中#xff0c;我们通常会遇到这么一个需求#xff1a;后端给前端返回一个任意文件类型的完整的url路径#xff0c;前端拿到这个路径直接通过浏览器下载文件到本地。我想大家应该都会首先想到使用HTML中的a标签#xff0c;#xff0c;因为a我们通常会遇到这么一个需求后端给前端返回一个任意文件类型的完整的url路径前端拿到这个路径直接通过浏览器下载文件到本地。我想大家应该都会首先想到使用HTML中的a标签因为a标签中提供download属性使得流量拿起将链接url视为下载资源。 然后我想记录此篇文章的主要原因是在使用a标签下载文件时由于浏览器默认行为对于一些特殊格式的文件比如txt,png,jpg等文件这些浏览器支持直接打开的文件是不会执行下载任务的而是会直接打开文件。因此本文主要先讲一下a下载文件的用法后面也会给出对于特殊文件时浏览器直接打开的解决方式。
a元素介绍
a元素或称锚元素可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或者其他URL的超链接
属性
download
导致浏览器将链接URL视为下载资源。可以使用或不适用filename值
如果没有指定值浏览器会从多个来源决定文件名和扩展名 Content-Disposition HTTP标头URL 路径的最后一段媒体类来自Content-Type标头data:URL的开头或者blob:URL的Blob.typefilename决定文件名的值。/和\被转换为下划线( _ )。文件系统可能会阻止文件名中其他的字符因此浏览器会在必要时适当调整文件名。
href
超链接所指向的URL。链接不限于基于HTTP的URL------它们可以使用浏览器支持任何URL的协议
使用文档片段链接到页面的某一段使用文本片段链接到某一段文字使用媒体片段链接到某个媒体文件使用 tel: URL 链接到一个电话号码使用 mailto: URL 链接到一个邮箱地址如果 web 浏览器不能支持其他 URL 协议网站可以使用 registerProtocolHandler()
target
该属性指定在何处显示链接URL作为浏览器上下文的名称标签、窗口或者iframe。以下关键字对加载的URL的位置有特殊含义
_self当前页面加载默认_blank通常在新标签页打开但用户可以通过配置选择在新窗口打开_parent当前浏览环境的父级浏览上下文。如果没有父级框架行为与_self相同_top最顶级的浏览上下文当前浏览上下文中最“高”的祖先如果没有祖先行为与_self相同。
我在这里主要介绍几个我常用到的属性但是a还有很多其他属性感兴趣的话可以在这里进行详细的了解a锚元素 - HTML超文本标记语言 | MDN
使用a元素下载文件遇到的问题
这里我要说明一下我使用a元素下载文件时遇到的问题chrome浏览器中会打开支持预览的文件比如前面提到的txt,png,jpg等而不是直接下载。然后我也看到一些人给出的方法是说给a标签加一个“download”属性但是不知道为啥我试了是不行的。
然后我又找到如下可以有效解决该问题的方式
解决方式1设置Content-type
chrome浏览器对与txtjson等文件直接打开应该是浏览器对这些类型的文件支持预览可以设置Content-type:application/octet-stream来解决此问题即告诉浏览器这是一个字节流浏览器处理字节流的默认方式是下载以下是我需要使用到的一些文件格式并对其进行处理还有很多其他文件格式拼接的类型 会有所差别可以详细查看这份如何设置Content-TypeMIME_对象存储 OSS-阿里云帮助中心 解决方法2使用ajax请求该url获取到文本内容手动实现下载。
可以参开这个博主这篇文章使用a标签下载文件浏览器会直接打开解决方案_a标签下载图片会打开-CSDN博客
