直接上demo代码,在官网demo基础上修改:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Saving multiple files as zip</title>
</head>
<body>
<button id="$start">Start</button>
<script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
<!--
includes blob.stream() polyfill
while Also making File constructor work in some browser that don't support it
-->
<script src="https://cdn.jsdelivr.net/gh/eligrey/Blob.js/Blob.js"></script>
<script src="../StreamSaver.js"></script>
<script src="zip-stream.js"></script>
<script>
$start.onclick = () => {
const fileStream = streamSaver.createWriteStream('archive.zip')
const readableZipStream = new ZIP({
start (ctrl) {
// ctrl.close()
},
async pull (ctrl) {
// Gets executed everytime zip.js asks for more data
// const url = 'https://app.yanfengseating.com/QMSstatic/Saqdc/347G-shiyanhuizong_202101041800100.zip'
// const res = await fetch(url)
// const stream = () => res.body
// const name = '347G-实验汇总.zip'
// ctrl.enqueue({ name, stream })
const promise = el => {
let name = el.name
return new Promise(resolve => {
console.log(el.url)
fetch(el.url).then(resp => {
if(resp.status == 200){
return () => resp.body
}
return null
}).then(stream => {
resolve({name: name, stream: stream})
})
})
}
let arr = [], files = []
let res = await fetch("./data.json").then(res=>res.json()).then(data=>{
files = data
})
console.log(files)
files.forEach(el => {
arr.push(promise(el))
})
console.log(arr)
await Promise.all(arr).then(res => {
console.log(res)
let nameMapList = []
res.forEach(item => {
let name = item.name
const stream = item.stream
let nameList = nameMapList.map(nameMap => nameMap.name)
//校验文件名称是否存在,如果存在则修改文件名称
if(nameList.indexOf(name) == -1){
nameMapList.push({name: name, cnt: 0})
}else{
let nameItem = nameMapList.find(item => item.name == name)
nameItem.cnt += 1
console.log(nameItem)
let fileName = name.substring(0, name.lastIndexOf('.'))
let prefix = name.substr(name.lastIndexOf('.'))
console.log(name)
name = fileName + ("("+nameItem.cnt+")") + prefix
console.log(name)
}
if(item.stream){
let file = {name, stream}
console.log(file)
ctrl.enqueue(file)
}
})
})
// if (done adding all files)
ctrl.close()
}
})
// more optimized
if (window.WritableStream && readableZipStream.pipeTo) {
return readableZipStream.pipeTo(fileStream).then(() => console.log('done writing'))
}
// less optimized
const writer = fileStream.getWriter()
const reader = readableZipStream.getReader()
const pump = () => reader.read()
.then(res => res.done ? writer.close() : writer.write(res.value).then(pump))
pump()
}
</script>
</body>
</html>
data.json文件:
[
{
"name" : "压力表证书.zip",
"url" : "https://app.xxxxx.com/QMSstatic/AdjustRecord/yalibiaozhengshu_202009161801718.zip"
},
{
"name" : "J20E 20.10.9.zip",
"url" : "https://app.xxxxx.com/QMSstatic/PartAuditInfo/J20E 20_202010121428461.10.9.zip"
},
{
"name" : "J20E 20.10.9.zip",
"url" : "https://app.xxxxx.com/QMSstatic/AuditLedger/J20E 20_202010121428490.10.9.zip"
}
]
测试了下,4G大小都可以下载