JS前端批量下载大文件并打包zip（StreamSaver.js）-CSDN博客

本文链接：https://blog.csdn.net/qq_16165281/article/details/123104549

直接上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大小都可以下载