首先分别讲一下下载文件的方式都有哪些
1.通过a标签的方式下载文件
下载
我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。
因为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
是指定用浏览器新窗口打开链接;如果不指定,那么就会在当前页面打开。
同样a
标签的download
属性也是可以使用的,代码如下:
window.open('http://www.baidu.com', '_blank', 'download=baidu.html')
当然这种方式也是有缺陷的,对比于a
标签,window.open
方式不能下载.html
、.htm
、.xml
、.xhtml
等文件;因为这些文件会被当成html
文件来处理,所以会直接在当前页面打开。
同样也不能下载跨域
的文件,这个是window.open
实现下载原理决定的。
3. 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属性来实现文件下载。
4.Blob 对象
下面是MDN对Blob对象的定义:
Blob对象表示一个不可变、原始数据的类文件对象。
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: '' })
Tips:需要关注的是type
属性,默认情况下,Blob
对象是没有type
属性的,那么这个Blob
就是一个无类型的Blob
,文件不会损毁,但是无法被正常识别。
5.URL.createObjectURL
下面是MDN对 URL.createObjectURL方法的定义:
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 type = await fileTypeFromStream(response.body);const blob = new Blob([response.data], { type })
6. 总结
上面的方案这么多,其实最终还是落到a
标签上,所以不管是通过浏览器的内置行为进行下载,还是通过ajax
进行下载,文件下载的最终还是浏览器的行为。
我项目中遇到的需求如下:
首先window.open(URL)的这种方式和a标签方式一样对于pdf和图片都会打开文件,而并非直接下载,那么当然如果自动打开pdf或者图片,鼠标右击图片或者pdf右上角也会有下载入口。但是如果说需求是点击按钮直接下载文件,那么需要采取获取文件流然后拿到文件流通过a标签下载这种当时,当然获取文件流可以前端去做也可以后端做。
本次需求是通过oss的URL来下载文件。那么我选择前端去做获取文件二进制流。
const downFile = (fileUrl) => {console.log(fileUrl); // fileUrl是oss的url字符串// ********* 方式一 ************// window.open(fileUrl)//window.open的方式// ********* 方式二 ************// let a = document.createElement("a")//直接a标签的方式// a.download = 'aaa'// // a.href = window.URL.createObjectURL(blob)// a.href = fileUrl// a.click()// a.remove()// ********* 方式三 ************//直接下载文件并且前端获取文件二进制流const xhr = new XMLHttpRequest();xhr.open('GET', fileUrl, true);xhr.responseType = 'blob'; // 获取文件blob数据xhr.onload = function () {if (xhr.status !== 200) {ElMessage({type: 'error',message: `下载出现错误`,})return;}const newUrl = window.URL.createObjectURL(xhr.response); // 生成一个可用的临时urlconst a = document.createElement('a'); // 生成a标签调用点击事件a.setAttribute('href', newUrl);a.setAttribute('target', '_blank');a.setAttribute('download', fileName); // 自定义文件名document.body.appendChild(a);a.click();document.body.removeChild(a);};xhr.send();}
感谢这位作者的分享,收获良多,特此记录。
https://juejin.cn/post/7254143696483991611