实现点击下载文件的几种方法
标签：文件下载，技巧
在实现点击下载文件有多种方法:
后端设置header信息
通过后端告诉浏览器header信息实现下载:
header('Content-type: image/jpeg');
header("Content-Disposition: attachment; filename='download.jpg'");
局限:
- 需要后端配合.
直接跳转到目标文件的地址
使用window.open()或者location.href或者直接使用<a>标签将页面跳转到文件地址,如果文件时浏览器无法打开的文件类型,浏览器会自动下载该文件.
局限:
- 会自动打开一个新页面,体验不好.
- 图片文件和文本文件这些浏览器能够打开的文件无法下载.
使用表单提交的方式下载文件
实现的思路是: 在点击之后,在页面中通过js代码新建一个form表单元素,然后通过提交表单的方式请求文件,如果文件类型是时浏览器无法打开的文件,那么就会对文件进行下载.
function download2() {
var $form = $('<form method="GET"></form>');
$form.attr('action', '/download/papers/1');
$form.appendTo($('body'));
$form.submit();
}
优点:
- 不需要开启新的页面即可下载文件.
局限:
- 无法下载浏览器能够打开的文件.
使用a标签的download属性
通过在a标签中添加download属性,即可实现点击下载任何文件,体验非常的好.
局限:
- 兼容性差,在大部分浏览中不支持跨域资源的
download属性下载.
使用file-saver插件实现文件下载
file-saver内部操作:
-
支持download的浏览器,直接使用a标签实现下载.
-
不支持download的浏览器:
-
特殊浏览器支持FileReader的，使用其构建URL，使用window.open或location.href来实现.
-
除了特殊的浏览器，使用URL.createObjectURL来构建对象URL，使用window.open或location.href来实现.
使用:
handleDownload(url, name) {
this.getBlob(url).then(blob => {
saveAs(blob, name);
})
return false;
};
getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
})
};
参考文档
张鑫旭博客关于a标签download属性的介绍
file-saver插件地址
作者简介：李成文，芦苇科技web前端开发工程师，擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设，专注于前端框架、交互设计、图像绘制、数据分析等研究。
个人博客：LCW blog
欢迎和我们一起并肩作战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多
提供深圳微信公众号制作，广东钉钉开发，专业的企业微信外包，高性价比的微信小程序建设，靠谱的小游戏制作，高质量的H5开发
