a标签下载文件与解决浏览器默认打开某些格式文件的问题

前言 

        在实际项目中,我们通常会遇到这么一个需求:后端给前端返回一个任意文件类型的完整的url路径,前端拿到这个路径直接通过浏览器下载文件到本地。我想大家应该都会首先想到使用HTML中的标签,,因为标签中提供download属性,使得流量拿起将链接url视为下载资源。

        然后我想记录此篇文章的主要原因是,在使用标签下载文件时,由于浏览器默认行为,对于一些特殊格式的文件比如:txt,png,jpg等文件这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件。因此,本文主要先讲一下下载文件的用法,后面也会给出对于特殊文件时浏览器直接打开的解决方式。

元素介绍

元素(或称锚元素),可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或者其他URL的超链接

属性

download

导致浏览器将链接URL视为下载资源。可以使用或不适用filename值:

  • 如果没有指定值,浏览器会从多个来源决定文件名和扩展名:
    • Content-Disposition HTTP标头
    • URL 路径的最后一段
    • 媒体类,来自Content-Type标头,data:URL的开头,或者blob:URL的Blob.type
  • filename:决定文件名的值。/和\被转换为下划线( _ )。文件系统可能会阻止文件名中其他的字符,因此浏览器会在必要时适当调整文件名。

href

超链接所指向的URL。链接不限于基于HTTP的URL------它们可以使用浏览器支持任何URL的协议:

  • 使用文档片段链接到页面的某一段
  • 使用文本片段链接到某一段文字
  • 使用媒体片段链接到某个媒体文件
  • 使用 tel: URL 链接到一个电话号码
  • 使用 mailto: URL 链接到一个邮箱地址
  • 如果 web 浏览器不能支持其他 URL 协议,网站可以使用 registerProtocolHandler()

target

该属性指定在何处显示链接URL,作为浏览器上下文的名称(标签、窗口或者