0
点赞
收藏
分享

微信扫一扫

前端文件下载的正确打开方式

前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。

1. a 标签

通过​​a​​标签的​​download​​属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:

<a href="http://www.baidu.com" download="baidu.html">下载</a>
复制代码

就上面的这个示例,我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。

因为​​a​​标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。

上面的代码是直接通过书写​​a​​标签来实现文件下载,我们也可以通过​​js​​来实现,代码如下:

const a = document.createElement('a')
a.href = 'http://www.baidu.com'
a.download = 'baidu.html'
a.click()
复制代码

效果和上面的一样,都是跳转到百度的首页,没有下载文件。

这里的重点是​​a​​标签的​​download​​属性,这个属性是​​HTML5​​新增的。

它的作用是指定下载的文件名,如果不指定,那么下载的文件名就会根据请求内容的​​Content-Disposition​​来确定,如果没有​​Content-Disposition​​,那么就会使用请求的​​URL​​的最后一部分作为文件名。

2. window.open

上面使用​​a​​标签的案例也可以通过​​window.open​​来实现,效果是一样的,代码如下:

window.open('http://www.baidu.com', '_blank')
复制代码

这里的​​_blank​​是指定打开的方式,如果不指定,那么就会在当前页面打开,这里指定​​_blank​​,就是在新的页面打开。

同样​​a​​标签的​​download​​属性也是可以使用的,代码如下:

window.open('http://www.baidu.com', '_blank', 'download=baidu.html')
复制代码

当然这种方式也是有缺陷的,对比于​​a​​标签,这种方式不能下载​​.html​​、​​.htm​​、​​.xml​​、​​.xhtml​​等文件,因为这些文件会被当成​​html​​文件来处理,所以会直接在当前页面打开。

同样也不能下载跨域的文件,毕竟是​​window.open​​,不是​​window.download​​(​​window.download​​是假想)。

3. location.href

这种方式和​​window.open(url)​​是一样的,代码如下:

location.href = 'http://www.baidu.com'
复制代码

这种方式拥有​​window.open​​的所有缺陷,所以不推荐使用,这里只当作了解,所以不做过多的讲解。

4. location.?其他属性

这里的其他指代的都是能跳转页面的属性,比如​​location.assign​​、​​location.replace​​、​​location.reload​​等,这些属性都是可以实现文件下载的,代码如下:

location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
location.reload('http://www.baidu.com')
复制代码

这里的​​location.reload​​是有点特殊的,它的作用是重新加载当前页面,但是它也可以接受一个参数,这个参数就是要跳转的页面,所以也可以实现文件下载。

当然同​​location.href​​一样,这些方式的缺点都一样,同时还有属于每个属性自身的特性,这里只当拓展知识,不做过多的讲解。

5. XMLHttpRequest

这种方式就是我们常说的​​ajax​​下载,包括​​axios​​、​​fetch​​等都是相同的,代码如下:

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.com')
xhr.send()

xhr.onload = function () {
const blob = new Blob([xhr.response], { type: 'text/html' })
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = 'baidu.html'
a.click()
}
复制代码

这里就不讲和​​XMLHttpRequest​​相关的知识了,只讲和文件下载相关的部分。

这里主要的逻辑是当我们的请求成功后,我们会拿到响应体的​​response​​,这个​​response​​就是我们要下载的内容,然后我们把它转换成​​blob​​对象,然后通过​​URL.createObjectURL​​来创建一个​​url​​,然后通过​​a​​标签的​​download​​属性来实现文件下载。

这里的知识点就有两个,一个是​​blob​​对象,一个是​​URL.createObjectURL​​。

5.1 blob

下面是​​blob​​对象的定义,来自​​MDN​​:

​Blob​​对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ​​ReadableStream​​ 来用于数据操作。

​Blob​​表示的不一定是​​JavaScript​​原生格式的数据。​​File​​ 接口基于 ​​Blob​​,继承了​​blob​​的功能并将其扩展以支持用户系统上的文件。

​blob​​对象是​​html5​​新增的对象,它的作用是用来存储二进制数据的,比如图片、视频、音频等,它的使用方法如下:

/**
* @param {Array} array 二进制数据
* @param {Object} options 配置项
* @param {String} options.type 文件类型,它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
* @param {String} options.endings 用于指定包含行结束符\n的字符串如何被写入。默认为transparent,表示不会修改行结束符。还可以指定为native,表示会将\n转换为\r\n。
*/
const blob = new Blob([], { type: '' })
复制代码

这里主要关注的是​​type​​属性,默认情况下,​​blob​​对象是没有​​type​​属性的,那么这个​​Blob​​就是一个无类型的​​Blob​​,文件不会损毁,但是无法被正常识别。

5.2 URL.createObjectURL

下面来自​​MDN​​:

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

这个方法是用来创建一个​​url​​的,它的作用是把一个​​blob​​对象转换成一个​​url​​,这个​​url​​可以用来下载文件,也可以用来预览文件,代码如下:

const url = URL.createObjectURL(blob)
复制代码

这里需要注意的是,这个​​url​​的生命周期和创建它的窗口中的​​document​​绑定,也就是说,当我们的​​document​​被销毁后,这个​​url​​就会失效,所以我们需要在合适的时机销毁它,代码如下:

URL.revokeObjectURL(url)
复制代码

回到我们刚才下载的问题,我们是通过​​blob​​对象来解决,但是我们的​​type​​属性是写死的,如果在文件类型是确定的情况下是没问题的,但是如果这个接口就是下载文件的接口,文件可能是各种类型的,我们应该怎么处理?

这里的没有正确答案,第一个可以和接口提供者进行协商,协商方案是不确定的,第二就是通过​​response​​的​​header​​来获取文件的​​type​​,也是我们要讲的:

const type = response.headers['content-type']

const blob = new Blob([response.data], { type })
复制代码

这里我们通过​​response​​的​​header​​来获取​​type​​,然后再创建​​blob​​对象,这样就可以正确的下载文件了。

其实​​content-type​​也可能是​​application/octet-stream​​,这个时候我们就需要通过​​file-type​​来获取文件的​​type​​了。

下面的代码是通过​​file-type​​来获取文件的​​type​​:

import {fileTypeFromStream} from 'file-type';

const fileType = await fileTypeFromStream(response.body);
const blob = new Blob([response.data], { type })
复制代码

​file-type​​的使用可以参考​​这里​​。

6. 总结

上面的方案这么多,其实最终还是落到​​a​​​标签上,所以不管是通过浏览器的内置行为进行下载,还是通过​​ajax​​进行下载,文件下载的最终还是浏览器的行为。


喜欢的关注前端面试公众号

前端文件下载的正确打开方式_文件下载


举报

相关推荐

0 条评论