StreamSaver实现浏览器中下载多个文件并打包成zip压缩包下载代码-html代码-BFW代码库

StreamSaver实现浏览器中下载多个文件并打包成zip压缩包下载代码

代码语言：html

所属分类：其他

代码描述：StreamSaver实现浏览器中下载多个文件并打包成zip压缩包下载代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="dark light">
    <title>Saving multiple files as zip</title>
  </head>
  <body>
    <button id="$start">Start</button>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/web-streams-ponyfill.min.js"></script>
    <!--
    includes blob.stream() polyfill
    while Also making File constructor work in some browser that don't support it
    -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Blob.js"></script>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/StreamSaver.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zip-stream.js"></script>
    <script>
      $start.onclick = () => {
        const fileStream = streamSaver.createWriteStream('archive.zip')

        const file1 = new File(['file1 content'], 'streamsaver-zip-example/file1.txt')

        // File Like object works too
        const file2 = {
          name: 'streamsaver-zip-example/file2.txt',
          stream () {
            // if you want to play it cool and use new api's
            //
            // const { readable, writable } = new TextEncoderStream()
            // writable.write('file2 content')
			// writable.close()
            // return readable

            return new ReadableStream({
              start (ctrl) {
                ctrl.enqueue(new TextEncoder().encode('file2 generated with readableStream'))
                ctrl.close()
              }
            })
          }
        }

        const blob = new Blob(['support blobs too'])

        const file3 = {
          name: 'streamsaver-zip-example/blob-example.txt',
          stream: () => blob.stream()
        }

        // In a ideall world i .........完整代码请登录后点击上方下载按钮下载查看