实现点击下载文件的几种方法

Posted luwei-web

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现点击下载文件的几种方法相关的知识,希望对你有一定的参考价值。


标签:文件下载,技巧

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

后端设置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

欢迎和我们一起并肩作战: [email protected]
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号制作,广东钉钉开发,专业的企业微信外包,高性价比的微信小程序建设,靠谱的小游戏制作,高质量的H5开发






























以上是关于实现点击下载文件的几种方法的主要内容,如果未能解决你的问题,请参考以下文章

Laravel:如何在控制器的几种方法中重用代码片段

用Delphi实现文件下载的几种方法(三种使用控件的方法)

a标签调用js的几种方法

原生js实现文件下载的几种情况

Android系统安装应用程序的几种方法

Android实现Button按钮点击事件监听的几种方式