JS 实现流式打包下载

require("http")
  .createServer((request, response) => {
    response.writeHead(200, {
      "Content-Type": "text/html",
      "Transfer-Encoding": "chunked",
    })

    setInterval(() => {
      response.write("chunked\r\n")
    }, 1000)
  })
  .listen(8000)

// 第一类：页面跳转、打开
location.href
window.open
iframe.src
a[download].click()

// 第二类：Ajax
fetch("/api/download")
  .then((res) => res.blob())
  .then((blob) => {
    // FileReader.readAsDataURL()
    const url = URL.createObjectURL(blob)
    // 借助第一类方式：location.href、iframe.src、a[download].click()
    window.open(url)
  })

<script setup lang="ts">
import { onMounted, ref } from "@vue/runtime-core";
import JSZip from 'jszip'
import { saveAs } from 'file-saver'

const inputRef = ref<HTMLInputElement | null>(null);
onMounted(() => {
  inputRef.value?.addEventListener("change", async (e: any) => {
    const file = e.target!.files[0]!
    const zip = new JSZip();
    zip.file(file.name, file);
    const blob = await zip.generateAsync({type:"blob"})
    saveAs(blob, "example.zip");
  });
});
</script>

<template>
  <button @click="inputRef?.click()">JSZip 文件打包下载</button>
  <input ref="inputRef" type="file" hidden />
</template>

// 创建
const writableStream = new WritableStream({
  write(chunk) {
    console.log(chunk)
  },
})
// 使用
const writer = writableStream.getWriter()
writer.write(1).then(() => {
  // 应当在 then 再写入下一个数据
  writer.write(2)
})

const readableStream = new ReadableStream({
  start(controller) {
    setInterval(() => {
      // 向流中放入数据
      controller.enqueue(value)
      // controller.close(); 表明数据已发完
    }, 1000)
  },
})

const reader = readableStream.getReader()
while (true) {
  const { value, done } = await reader.read()
  console.log(value)
  if (done) break
}

const response = await fetch("/api/download")
// response.body === ReadableStream
const reader = response.body.getReader()

while (true) {
  const { done, value } = await reader.read()
  console.log(value)
  if (done) break
}

<input type="file" id="file">

document.getElementById("file")
  .addEventListener("change", async (e) => {
    const file: File = e.target.files[0];

    const reader = file.stream().getReader();
    while (true) {
      const { done, value } = await reader.read();
      console.log(value);
      if (done) break;
    }
	});

const { port1, port2 } = new MessageChannel()

const writableStream = new WritableStream({
  write(chunk) {
    port1.postMessage(chunk)
  },
})

const readableStream = new ReadableStream({
  start(controller) {
    port2.onmessage = ({ data }) => {
      controller.enqueue(data)
    }
  },
})

const writer = writableStream.getWriter()
const reader = readableStream.getReader()

writer.write(123) // 写入数据

reader.read() // 读出数据 123

const { readable, writable } = new TransformStream()

writable.getWriter().write(123) // 写入数据

readable.getReader().read() // 读出数据 123

self.onfetch = (event) => {
  const url = event.request.url
  if (url === "拦截") {
    event.respondWith(new Response())
  }
}

interface Response: {
    new(body?: BodyInit | null, init?: ResponseInit): Response
}

type BodyInit = ReadableStream | Blob | BufferSource | FormData | URLSearchParams | string

interface ResponseInit {
    headers?: HeadersInit
    status?: number
    statusText?: string
}

// index.vue
<script setup lang="ts">
import { onMounted, ref } from "@vue/runtime-core"
import { createDownloadStream } from "../utils/common"

const inputRef = ref<HTMLInputElement | null>(null)

// 注册 service worker
async function register() {
  const registed = await navigator.serviceWorker.getRegistration("./")
  if (registed?.active) return registed.active

  const swRegistration = await navigator.serviceWorker.register("sw.js", {
    scope: "./",
  })

  const sw = swRegistration.installing! || swRegistration.waiting!

  let listen: any

  return new Promise<ServiceWorker>((resolve) => {
    sw.addEventListener(
      "statechange",
      (listen = () => {
        if (sw.state === "activated") {
          sw.removeEventListener("statechange", listen)
          resolve(swRegistration.active!)
        }
      })
    )
  })
}

// 向 service worker 申请下载资源
async function createDownloadStream(filename: string) {
  const { port1, port2 } = new MessageChannel()

  const sw = await register()

  sw.postMessage({ filename }, [port2])

  return new Promise<WritableStream>((r) => {
    port1.onmessage = (e) => {
      const iframe = document.createElement("iframe")
      iframe.hidden = true
      iframe.src = e.data.download
      iframe.name = "iframe"
      document.body.appendChild(iframe)
      r(e.data.writable)
    }
  })
}

onMounted(async () => {
  // 监听文件上传
  inputRef.value?.addEventListener("change", async (e: any) => {
    const files: FileList = e.target!.files
    const file = files.item(0)!

    const reader = file.stream().getReader()
    const writableStream = await createDownloadStream(file.name)
    const writable = writableStream.getWriter()

    const pump = async () => {
      const { done, value } = await reader.read()
      if (done) return writable.close()
      await writable.write(value)
      pump()
    }

    pump()
  })
})
</script>

<template>
  <button @click="inputRef?.click()">本地流式文件下载</button>
  <input ref="inputRef" type="file" hidden />
</template>

// service-worker.js
self.addEventListener("install", () => {
  self.skipWaiting()
})

self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim())
})

const map = new Map()

self.onmessage = (event) => {
  const data = event.data

  const filename = encodeURIComponent(data.filename.replace(/\//g, ":"))
    .replace(/['()]/g, escape)
    .replace(/\*/g, "%2A")

  const downloadUrl = self.registration.scope + Math.random() + "/" + filename
  const port2 = event.ports[0]

  // [stream, data]
  const { readable, writable } = new TransformStream()

  const metadata = [readable, data]

  map.set(downloadUrl, metadata)
  port2.postMessage({ download: downloadUrl, writable }, [writable])
}

self.onfetch = (event) => {
  const url = event.request.url

  const hijacke = map.get(url)

  if (!hijacke) return null
  map.delete(url)

  const [stream, data] = hijacke
  // Make filename RFC5987 compatible
  const fileName = encodeURIComponent(data.filename)
    .replace(/['()]/g, escape)
    .replace(/\*/g, "%2A")

  const headers = new Headers({
    "Content-Type": "application/octet-stream; charset=utf-8",
    "Transfer-Encoding": "chunked",
    "response-content-disposition": "attachment",
    "Content-Disposition": "attachment; filename*=UTF-8''" + fileName,
  })

  event.respondWith(new Response(stream, { headers }))
}

onMounted(async () => {
  const input = document.querySelector("#file")!;
  input.addEventListener("change", async (e: any) => {
    const stream = createDownloadStrean()
    const file = e.target!.files[0];
    const reader = file.stream().getReader();

    const zip = new fflate.Zip((err, dat, final) => {
      if (!err) {
        fileStream.write(dat);
        if (final) {
          fileStream.close();
        }
      } else {
        fileStream.close();
      }
    });

    const helloTxt = new fflate.ZipDeflate("hello.txt", { level: 9 });
    zip.add(helloTxt);

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        zip.end();
        break
      };
      helloTxt.push(value)
    }
  });
});