点击下载的几种方式（转）

转载地址：https://www.jianshu.com/p/10ac5c482193

只转了前面几种比较常用的方法，想看全部的请前往原网址查看

 

 

在实现点击下载文件有多种方法:

后端设置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属性下载.

作者：广州芦苇科技web前端
链接：https://www.jianshu.com/p/10ac5c482193
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。