关于点击下载文件的那些事

前言

通过点击下载部署在服务器上的文件，是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向服务器请求资源，按照先前的流程，我们看看正常文件的体验：

体验良好，也没有tab的闪动。接下来我们看看针对图片的体验：

很遗憾，针对图片等文件还是会打开tab直接展示内容。

全村的希望：download.js

这是国外一个大佬写的专门针对文件下载的脚本，功能非常丰富，不仅可以下载服务器上的内容，还可以针对base64等dataUrl形式的文件进行下载，使用方法非常丰富，此处是传送门download.js官方文档，这里贴上源码和笔者的简单注释（注意这里是html内嵌脚本的形式展现的，如有需要可以单独抠出来搞成一个模块供外部引用）：

<script>//download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
// v4 adds AMD/UMD, commonJS, and plain browser support
// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
// https://github.com/rndme/download

(function (root, factory) {
    
    //  兼容各种模块写法，在全局对象上挂载download方法
	if (typeof define === 'function' && define.amd) {
    
		// AMD. Register as an anonymous module.
		//	针对AMD规范，注册一个匿名模块
		define([], factory);
	}