在前端站点上下载文件,这是一个极其普遍的需求,很早前就已经有各种解决方法了,为什么还写这么老的文章,只是最近在带一个新人,他似乎很多都一知半解,也遇到了我们必经问题之“不能下载txt、png等文件”的典型问题,我就给他总结下下载的几个方式。顺便分享出来,也许,真有人需要。
这是以前常使用的传统方式,毕竟那个年代,没那么多好用的新特性呀。
道理也很简单,为一个下载按钮添加 click
事件,点击时动态生成一个表单,利用表单提交的功能来实现文件的下载(实际上表单的提交就是发送一个请求)
来看下如何生成一个表单,生成怎么样的一个表单:
/**
* 下载文件
* @param {String} path - 请求的地址
* @param {String} fileName - 文件名
*/
function downloadFile (downloadUrl, fileName) {
// 创建表单
const formObj = document.createElement('form');
formObj.action = downloadUrl;
formObj.method = 'get';
formObj.style.display = 'none';
// 创建input,主要是起传参作用
const formItem = document.createElement('input');
formItem.value = fileName; // 传参的值
formItem.name = 'fileName'; // 传参的字段名
// 插入到网页中
formObj.appendChild(formItem);
document.body.appendChild(formObj);
formObj.submit(); // 发送请求
document.body.removeChild(formObj); // 发送完清除掉
}
最简单最直接的方式,实际上跟 a
标签访问下载链接一样
window.open('downloadFile.zip');
location.href = 'downloadFile.zip';
当然地址也可以是接口api的地址,而不单纯是个链接地址。
我们知道, a
标签可以访问下载文件的地址,浏览器帮助进行下载。但是对于浏览器支持直接浏览的txt、png、jpg、gif等文件,是不提供直接下载(可右击从菜单里另存为)的。
为了解决这个直接浏览不下载的问题,可以利用 download
属性。
download
属性是HTML5新增的属性,兼容性可以了解下 can i use download
总体兼容性算是很好了,基本可以区分为IE和其他浏览。但是需要注意一些信息:
基于上面描述,如果你尝试下载跨域链接,那么其实 download
的效果就会没了,跟不设置 download
表现一致。即浏览器能预览的还是会预览,而不是下载。
简单用法:
<a href="example.jpg" download>点击下载</a>
可以带上属性值,指定下载的文件名,即重命名下载文件。不设置的话默认是文件原本名。
<a href="example.jpg" download="test">点击下载</a>
如上,会下载了一个名叫 test
的图片
监测是否支持download
要知道浏览器是否支持 download
属性,简单的一句代码即可区分
const isSupport = 'download' in document.createElement('a');
对于在跨域下不能下载可浏览的文件,其实可以跟后端协商好,在后端层做多一层转发,最终返回给前端的文件链接跟下载页同域就好了。
该方法较上面的直接使用 a
标签 download
这种方法的优势在于,它除了能利用已知文件地址路径进行下载外,还能通过发送ajax请求api获取文件流进行下载。毕竟有些时候,后端不会直接提供一个下载地址给你直接访问,而是要调取api。
利用 Blob
对象可以将文件流转化成 Blob
二进制对象。该对象兼容性良好,需要注意的是
BlobUrl
或 ObjectURL
是有缺陷的,如下文中通过 URL.createObjectURL
生成的链接第二点,这就导致这里以下的方案需留意适用于Safari的使用。希望日后Safari能修复该问题(当前我所测试版本为13.0.4 )。
进行下载的思路很简单:发请求获取二进制数据,转化为 Blob
对象,利用 URL.createObjectUrl
生成url地址,赋值在 a
标签的 href
属性上,结合 download
进行下载。
/**
* 下载文件
* @param {String} path - 下载地址/下载请求地址。
* @param {String} name - 下载文件的名字/重命名(考虑到兼容性问题,最好加上后缀名)
*/
downloadFile (path, name) {
const xhr = new XMLHttpRequest();
xhr.open('get', path);
xhr.responseType = 'blob';
xhr.send();
xhr.onload = function () {
if (this.status === 200 || this.status === 304) {
// const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
// const url = URL.createObjectURL(blob);
const url = URL.createObjectURL(this.response);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
}
该方法不能缺少 a
标签的 download
属性的设置。因为发请求时已设置返回数据类型为 Blob
类型( xhr.responseType='blob'
),所以 target.response
就是一个 Blob
对象,打印出来会看到两个属性 size
和 type
。虽然 type
属性已指定了文件的类型,但是为了稳妥起见,还是在 download
属性值里指定后缀名,如Firefox不指定下载下来的文件就会不识别类型。
大家可能会注意到,上述代码有两处注释,其实除了上述的写法外,还有另一个写法,改动一丢丢。如果发送请求时不设置 xhr.responseType='blob'
,默认ajax请求会返回 DOMString
类型的数据,即字符串。这时就需要两处注释的代码了,对返回的文本转化为 Blob
对象,然后创建blob url,此时需要注释掉原本的 consturl=URL.createObjectURL(target.response)
。
这里的用法跟上面用 Blob
大同小异,基本上思路是一样的,唯一不同的是,上面是利用 Blob
对象生成 BlobURL
,而这里则是生成 DataURL
,所谓 DataURL
,就是 base64
编码后的url形式。
/**
* 下载文件
* @param {String} path - 下载地址/下载请求地址。
* @param {String} name - 下载文件的名字(考虑到兼容性问题,最好加上后缀名)
*/
downloadFile (path, name) {
const xhr = new XMLHttpRequest();
xhr.open('get', path);
xhr.responseType = 'blob';
xhr.send();
xhr.onload = function () {
if (this.status === 200 || this.status === 304) {
const fileReader = new FileReader();
fileReader.readAsDataURL(this.response);
fileReader.onload = function () {
const a = document.createElement('a');
a.style.display = 'none';
a.href = this.result;
a.download = name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}
};
}
这里额外提供个方法,该方法作用是,当你知道文件的全名(含后缀名),想要重命名,但是得后缀名一样,来获取后缀名。
function findType (name) {
const index = name.lastIndexOf('.');
return name.substring(index + 1);
}
BlobURL
,这个可在Safari上使用