文件下载

174 阅读1分钟

文件下载:

大致:

单文件下载:

1.直接拿到当前文件线上地址;

2.拿到生成的下载链接之后,生成一个a标签,然后将链接传递a标签

3.通过生成 new MouseEvent(‘’click),生成绑定点击事件,通过dispatchEvent模拟出发点击事件完成a标签下载任务;

const click = (node: HTMLElement) => {

    const evt = new MouseEvent('click');

    node.dispatchEvent(evt);

};

// 需要注意:如果下载资源和当前页面跨域情况下,a链接下载会失效,需要先将资源通过fetch转换成blob,进行本地下载:

Fetch函数:异步请求,es6新推出的一种可以替代XMLHttpRequest方法,返回promise,默认请求方式get

await fetch(link)

            .then(res => res.blob())

            .then(blob => downloadBlob(blob, filename));

最后在通过URL.createObjectURL(blob),将blob生成url提供给a标签进行下载;

多文件/文件夹下载:

1.先调用下载的stasks任务,生成任务线;

2.通过生成的任务线再调用文件下载链接生成接口,轮询生成下载链接

3.创建一个无感知iframe窗口,窗口链接为下载链接,即可自动出发浏览器下载;