在js中使用jszip + file-saver实现批量下载OSS文件功能示例
前端  /  管理员 发布于 8个月前   272
使用jszip + file-saver实现批量下载OSS文件功能
依赖库
jszip (js 把多个文件打包成 zip)
file-saver (在浏览器实现保存文件)
示例代码:
// 下载图片
// files 文件列表
// filename 保存到本地的文件名
function downloadMaterial(files, filename) {
// 使用xhr请求获取文件内容
function getImgBuffer(url) {
return new Promise((reslove, reject) => {
let xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", url, true)
xmlhttp.responseType = 'blob'
xmlhttp.onload = function () {
if (this.status == 200) {
reslove(this.response)
} else {
reject()
}
}
xmlhttp.send()
})
}
const _zip = new zip()
let promises = []
// 请求多个文件,并把文件打包进 zip (这里先把请求存入 promises 数组, 实际并未请求)
for (let i in files) {
// 这里解释一下为啥用 Math.random()
// 因为 oss 跨域策略是当请求 header 存在 origin 参数时才会返回对应 cors header
// 由于 img 并未发送 origin 参数,所以页面渲染了图片,使用xhr再次请求时会使用缓存的信息,导致浏览器没有获取到允许跨域的 header 导致报错,使用 Math.random() 加了参数就用不到 img 缓存的信息了
const promise = getImgBuffer(`${files[i]}?_r=${Math.random()}`).then((data) => {
_zip.file(files[i].name, data, { binary: true })
})
promises.push(promise)
}
// 使用 Promise all 发送请求
Promise.all(promises).then(() => {
// 生成zip文件
_zip.generateAsync({ type: 'blob' }).then(content => {
// 使用 file-saver保存文件
FileSaver.saveAs(content, filename)
})
}).catch(e => {
console.log(e)
})
}
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号