a href点击无效_前端点击下载文件那些事

前言

通过点击下载部署在服务器上的文件，是B端的一个常见需求,但是为了获得良好的体验，其中还是有很多值得钻研的小知识点。笔者最近在开发个人云盘，在开发文件下载功能的过程中也接触到了这一领域（完成后也会发一篇博文，这里先占个坑）。网上有各种各样的实现，不过也有各种各样的问题，比如跨域下载不支持，需要另开浏览器tab或者图片等浏览器可以识别的内容直接打开等等影响体验的细节，这里就摊开讲讲。

常见方法

a标签内置下载

实现非常简单：

<a href='下载文件的url'>点我下载</a>

相信这也是大多数人第一个想到的方法，通常情况下体验十分完美，但是如果遇到下载图片，pdf,txt等等浏览器能够直接解析出来并展示的文件，就会出现如下的结果:

浏览器发现该资源可以解析后，会直接跳转到下载资源的url并在窗口展示。这个体验想必是大多数人不能接受的，为此我们可以添加download参数，告诉浏览器我们想要的是下载这个资源，类似这样：

<a href='下载文件的url' download>点我下载</a>

通过download还可以修改文件下载后的名字和类型：

<a href='下载文件的url' download='文件名.后缀名'>点我下载</a>
复制代码

如果不要求修改文件的类型，后缀名可以省略：

<a href='下载文件的url' download='文件名'>点我下载</a>
​

download属性就是银弹吗?很遗憾让你失望了，亲测在chrome下，如果资源不是同源的，download属性是无效的，加与不加一个样，如果要解决这个问题，只有通过后端进行配合了。关于该属性的兼容性内容，有张鑫旭大神的总结贴了解HTML/HTML5中的download属性可以参考，这里不赘述。

window.open开启新tab下载

该方法通过winodw.open打开新的tab，利用浏览器无法解析的资源会变成下载的特性来实现功能，api也不复杂：

window.open('目标url')

我们看看在普通文件下的表现：

大家可以明显看到，这里有开一个tab的过程。浏览器发现该资源无法解析，浏览器会关闭该tab，走下载流程 大家肯定比较关心针对图片的表现，很遗憾跟a标签的下载一样不尽如人意:

针对浏览器可以直接解析出来的内容，浏览器会开启tab并显示内容。

通过提交表单

原理上是通过构造表单，通过submit方法向服务器请求资源：

export function downloadUrlFile(url) {
    
    let tempForm = document.createElement('form')
    tempForm.action = url
    tempForm.method = 'get'
    tempForm.style.display = 'none'
    document.body.appendChild(tempForm)
    tempForm.submit()
    return tempForm
}

给form表单设置get方法，然后根据传入的url向服务器请求资源，按照先前的流程，我们看看正常文件的体验：