前端下载文件时,如果文件过大,内存溢出,点击下载后没有反应,过了几分钟后才弹出保存对话框,看不到下载进度

最新推荐文章于 2025-06-04 10:12:58 发布

特凹涛

最新推荐文章于 2025-06-04 10:12:58 发布

阅读量1.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/nanchengguren/article/details/139825267

前段时间的开发中,领导发现了我代码中的bug.

原因是我之前下载文件一直用的是

这样的下载,在对于小文件时,没有什么问题,但是
1、文件大的时候，会导致内存溢出（因为文件变成了js变量存储，超大二进制进入了内存）
2、点击点击下载，没有任何反应，隔了几分钟，才弹出保存对话框，用户看不到下载进度（测试了70mb的文件，体验就是这个感觉）

老大给的思路

先从技术原理上搞清楚：什么情况，浏览器对弹出下载？

http的header头信息，才是让浏览器弹出下载弹窗的关键点：http header：Content-Disposition: attachment; filename="文件名.ext"

我们公司常用七牛存储，七牛提供了在url加上 ?attname= 就可以让七牛返回下载文件的header （添加参数的时候，不要把url链接搞坏了，尽量参考下文的函数，比如，url不要又多个问号、参数添加到 hash 之后）

解决方案

unction downloadFile(url) {
    // 创建隐藏的可下载链接
    var element = document.createElement('a');

    let url2 = new URL(url);
    // 如果url没有 attname 参数，就添加 attname=
    if (!url2.searchParams.get('attname')) {
        url2.searchParams.set('attname', '')
        url = url2.toString();
    }

    element.setAttribute('href', url);
    // 下载的url于页面不同域，会导致 download 无法触发下载，点击后，页面会跳转到下载的url
    // 但 http header：Content-Disposition: attachment; 能让浏览器弹出下载
    element.setAttribute('download', ''); // 空字符串表示使用URL默认的文件名

    // 触发点击
    document.body.appendChild(element);
    element.click();

    // 然后移除
    document.body.removeChild(element);
}