今晚月色真美

问题

今天做多文件下载时,常规的使用了

1
window.location.href = `${HOST}/download?path=xxx.pdf`

如果只有单个文件下载,这段代码是没有问题了,也可以成功下载。但是通过轮询的方式去批量下载时,就只会响应到最后一个下载了,因为window.location.href打开是异步方法,同时操作只会响应最后一个,那怎么支持多文件下载呢?

解决

后面我采用了a标签的方式进行多文件下载,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 多文件下载
moreFilesDownload(files: string) {
const filesArr = JSON.parse(files)
filesArr.forEach((item: any) => {
this.download(item.name, item.url)
})
}

// 下载链接
download(name: string, path: string) {
const aLink = document.createElement('a')
aLink.setAttribute("href", `${HOST}/download?path=${path}`)
aLink.setAttribute("download", name)
document.body.appendChild(aLink)
aLink.click()
document.body.removeChild(aLink)
}

这样就可以实现多文件下载了。

兼容性更好的方案

采用a标签href属性传path下载多文件,有个弊端,就是下载的文件名不能自定义,就是这段代码
aLink.setAttribute("download", name)实际不生效,它下载后使用的文件名是服务器上的,但往往服务器上的文件名大多是随机生成的唯一字符串,下下来文件后不是明文,用户体验上来说不友好,这样就需要下载时自定义文件名,哪采用什么方案呢?

经过摸索,我使用了Vue的文件流Blob下载方式:

1
2
3
4
5
6
7
8
9
10
11
var link = document.createElement('a');
var body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;

// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);

创建Blob对象传入href,此时设置a标签download属性(即设置文件名)就会生效。

上段代码只是部分代码,此下载类代码已放到github:download JS类

导入download类,最后调用一行就实现修改下载文件名功能:

1
download('https://xxxx/xxx.png', 'filename.png')

 评论

本站总字数统计:24.4k

感谢您的浏览, 本站总访问量为 次 。
载入天数...载入时分秒...