前端实现文件下载

前端实现文件下载功能

对于下载文件来说，大部分场景都是后端来实现，点端指需求请求接口就好了，但是有时候这种方式反而会占用多余的资源和带宽，如果需要下载的是用户自己生成的内容或者内容已经返回到客户端了，这时候能不经过服务端而直接生成下载任务，能节省不少的资源和时间开销。

一般来说前端实现的思路就是通过动态创建a标签，设置其download属性，最后删除a就好了，对于不是图片的文件一般都可以下载，但是如果是图片，有些浏览器会自动打开图片，所以我们需要手动把它转化为data:URLs或blob:URLs，基于这个原理，我们可以用fileReader，也可以用fetch-URL.createObjectURL，这里经过大量测试我采用后者：

 

function download(url, filename) {
    return fetch(url).then(res => res.blob().then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }))
}

　该方法传入一个文件的地址和希望使用的文件名，这样，我们就能优雅的使用它来实现下载了

 

posted @ 2019-09-20 14:50  lijuntao  阅读(8130)  评论(0)  编辑  收藏  举报
TOP