使用js进行文件下载的方法

aak1247

已于 2024-09-18 17:22:42 修改

阅读量10w+

点赞数 4

分类专栏：前端文章标签：前端 js 文件下载异步

于 2018-10-28 17:52:46 首次发布

本文链接：https://blog.csdn.net/aak1247/article/details/83476585

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现文件下载的方法，通过Ajax下载文件内容到内存，并利用Blob对象和URL.createObjectURL实现无跳转下载，便于掌握下载进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Github page原文链接：https://aak1247.github.io/js-download-blob.html

博客地址: 黑境-aak1247的博客

今天学到了一种使用js实现文件下载的方法,相比用表单进行下载要安全很多,不会有跳转问题,而且便于掌握下载进度.

大致思路

首先,使用ajax下载文件内容,读到内存中去. 这一步需要使用Blob对象存储文件内容;
然后建立一个隐藏的a标签,其链接指向内存中的地址. 这一步使用URL.createObjectUrl()方法拿到内存中的地址;
点击下载(直接调用a标签的click()方法即可),即从内存中下载到磁盘中去;

Blob对象的用法

构造函数

Blob(Content:array, options:Object)

Options

{type: type}: blob对象的MIME类型, 比如text/html或application/octet-binary等等.

示例

1	var blob = new Blob(["test"], {type: "application/csv"})//MIME类型为csv的Blob对象

获取URL并实现下载

示例

var blob = new Blob(["test"], {type: "application/csv"});
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);//创建指向此blob的链接
a.download = "test.csv";
//输出类似于blob:http://$website/fsadjlfsdjl 这样的字符串
document.body.append(a);
a.click();//实现下载
a.remove();

从远端下载

如果要从远端下载文件,先使用ajax下载数据, 在拿到数据以后再使用blob做处理就好.

示例代码

//使用jquery
$.get(url, function(data){
    var blob = new Blob([data], {type: "application/csv"});//加一个方括号,data会直接转为字符串, 这里有一个问题,就是jquery本身会将data作为String处理
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "download.csv";
    document.body.appendChild(a);
    a.click();
    a.remove();
});

考虑到jQuery的问题以及兼容性等, 以及不能转为字符串的情况, 可以使用传统的XMLHttpRequest发送请求(),代码如下:

//使用XMLHttpRequest
var httpRequest;
if (window.XMLHttpRequest) {
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 兼容ie6及之前的版本
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.open("GET", url/*url地址*/, true);
httpRequest.responseType = "blob";
httpRequest.onload = function () {
    if (this.status === 200 ) {
        var blob = this.response;
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = function(ev) {//读入完成事件
            var a = document.createElement("a");
            a.href = ev.target.result;//读取结果
            a.download = "download.csv";
            document.body.appendChild(a);
            a.click();
            a.remove();
        }
    }
}
httpRequest.send();