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

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

// 第一類：頁面跳轉(zhuǎn)、打開
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>

// 創(chuàng)建
const writableStream = new WritableStream({
  write(chunk) {
    console.log(chunk)
  }
})
// 使用
const writer = writableStream.getWriter()
writer.write(1).then(() => {
  // 應(yīng)當(dāng)在 then 再寫入下一個(gè)數(shù)據(jù)
    writer.write(2)
})

const readableStream = new ReadableStream({
  start(controller) {
        setInterval(() => {
            // 向流中放入數(shù)據(jù)
            controller.enqueue(value);
        // controller.close(); 表明數(shù)據(jù)已發(fā)完
        }, 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) // 寫入數(shù)據(jù)

reader.read() // 讀出數(shù)據(jù) 123

const {readable, writable} = new TransformStream()

writable.getWriter().write(123) // 寫入數(shù)據(jù)

readable.getReader().read() // 讀出數(shù)據(jù) 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
}

const createDownloadStrean = async(filename) = >{ // 通過 channel 接受數(shù)據(jù) 
    const {
        port1,
        port2
    } = new MessageChannel();

    // 傳遞 channel，這樣 worker 就可以往回發(fā)送消息了
    serviceworker.postMessage({
        filename
    },
    [port2]);

    return new Promise((resolve) = >{
        port1.onmessage = ({
            data
        }) = >{
            // 拿到url, 發(fā)起請(qǐng)求
            iframe.src = data.url;
            document.body.appendChild(iframe);
            // 返回可寫流
            resolve(data.writable)
        };
    });
}

js self.onmessage = (event) = >{
    const filename = event.data.filename // 拿到 channel 
    const port2 = event.ports[0] // 隨機(jī)一個(gè) url 
    const downloadUrl = self.registration.scope + Math.random() + '/' + filename // 創(chuàng)建轉(zhuǎn)換流 
    const {
        readable,
        writable
    } = new TransformStream() // 記錄 url 和可讀流，用于后續(xù)攔截和響應(yīng)構(gòu)建 
    map.set(downloadUrl, readable) // 傳回 url 和可寫流 
    port2.postMessage({
        download: downloadUrl,
        writable
    },
    [writable])
}

self.onfetch = event => { const url = event.request.url // 從 map 中取出流，存在表示這個(gè)請(qǐng)求是需要攔截的 
const readableStream = map.get(url) 
if (!readableStream) return null map.delete(url)

const headers = new Headers({
    'Content-Type': 'application/octet-stream; charset=utf-8',
   'Content-Disposition': 'attachment',
    'Transfer-Encoding': 'chunked'
})
// 構(gòu)建返回響應(yīng)
event.respondWith(
    new Response(readableStream, { headers })
 )
}

input.addEventListener("change", async(e: any) = >{
    const file = e.target ! .files[0];
    const reader = file.stream().getReader();
    const writableStream = createDownloadStrean() const writable = writableStream.getWriter() const pump = async() = >{
        const {
            done,
            value
        } = await reader.read();
        if (done) return writable.close() await writable.write(value) // 遞歸調(diào)用，直到讀取完成 
        return pump()
    };
    pump();
})

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

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

// 注冊(cè) 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 申請(qǐng)下載資源
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 () => {
  // 監(jiān)聽文件上傳
  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)
    }
  });
});