您当前的位置:周俊奇博客 > 项目

js实现文件流式下载文件方法详解及完整代码

时间:2022-12-10 10:14:57

浏览器中的流式操作可以节省内存,扩大JS的应用边界,比如我们可以在浏览器里进行视频剪辑,而不用担心视频文件将内存撑爆。

QQ截图20220913092501.png

浏览器虽然有流式处理数据的 API,并没有直接提供给JS进行流式下载的能力,也就是说即使我们可以流式的处理数据,但想将其下载到磁盘上时,依然会对内存提出挑战。

这也是我们讨论的前提:

  • 流式的操作,必须整个链路都是流式的才有意义,一旦某个环节是非流式(阻塞)的,就无法起到节省内存的作用。

本篇文章分析了如何在JS中流式的处理数据 ,流式的进行下载,主要参考了StreamSaver.js的实现方案。

分为如下部分:

  • 流在计算机中的作用

  • 服务器流式响应

  • JS下载文件的方式

  • JS持有数据并下载文件的场景

  • 非流式处理、下载的问题

  • 浏览器流式API

  • JS流式的实现方案

  • 实现JS读取本地文件并打包下载

流在计算机中的作用

流这个概念在前端领域中提及的并不多,但是在计算机领域中,流式一个非常常见且重要的概念。

当流这个字出现在 IO 的上下文中,常指的得就是分段的读取和处理文件,这样在处理文件时(转换、传输),就不必把整个文件加载到内存中,大大的节省了内存空间的占用。

在实际点说就是,当你用着4G内存的iPhone 13看电影时,并不需要担心视频文件数据把你的手机搞爆掉。

服务器流式响应

在谈下载之前,先提一下流式响应。

如上可知,当我们从服务器下载一个文件时,服务器也不可能把整个文件读取到内存中再进行响应,而是会边读边响应。

那如何进行流式响应呢?

只需要设置一个响应头Transfer-Encoding: chunked,表明我们的响应体是分块传输的就可以了。

以下是一个nodejs的极简示例,这个服务每隔一秒就会向浏览器进行一次响应,永不停歇。

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

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

JS下载文件的方式

js中下载文件的方式,有如下两类:

// 第一类:页面跳转、打开
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)
  })

不难看出,使用Ajax下载文件,最终还是要借助第一类方法才可以实现下载。

而第一类的操作都会导致一个行为:页面级导航跳转

所以我们可以总结得出浏览器的下载行为:

  • 在页面级的跳转请求中,检查响应头是否包含Content-Disposition: attachment。对于a[download]createObjectURLurl跳转,可以理解为浏览器帮忙加上了这个响应头。

  • Ajax发出的请求并不是页面级跳转请求,所以即使拥有下载响应头也不会触发下载行为。

两类下载方式的区别

这两种下载文件的方式有何区别呢?

第一类请求的响应数据直接由下载线程接管,可以进行流式下载,一边接收数据一边往本地写文件。

第二类由JS线程接管响应数据,使用 API 将文件数据创建成url触发下载。

但是相应的 APIcreateObjectURLreadAsDataURL必须传入整个文件数据才能进行下载,是不支持流的。也就是说一旦文件数据到了JS手中,想要下载,就必须把数据堆在内存中,直到拿到完整数据才能开始下载。

所以当我们从服务器下载文件时,应该尽量避免使用Ajax,直接使用页面跳转类的 API 让下载线程进行流式下载。

但是有些场景下,我们需要在JS中处理数据,此时数据在JS线程中,就不得不面对内存的问题。

JS持有数据并下载文件的场景

以下场景,我们需要在JS中处理数据并进行文件下载。

  • 纯前端处理文件流:在线格式转换、解压缩等

  • 整个数据都在前端转换处理,压根没有服务端的事

  • 文章所要讨论的情况

  • 接口鉴权:鉴权方案导致请求必须由JS发起,如cookie + csrfTokenJWT

  • 使用ajax:简单但是数据都在内存中

  • (推荐)使用iframe + form实现:麻烦但是可以由下载线程流式下载

  • 服务端返回文件数据,前端转换处理后下载

  • 如服务端返回多个文件,前端打包下载

  • (推荐)去找后端 ~~聊一聊~~

可以看到第一种情况是必须用JS处理的,我们来看一下如果不使用流式处理的话,会有什么问题。

非流式处理、下载的问题

去网上搜索「前端打包」,99% 的内容都会告诉你使用JSZip,谈起文件下载也都会提起一个file-saver的库(JSZip官网也推荐使用这个库下载文件)。

那我们就看一下这些流行库的的问题。

<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>

以上是一个用JSZip的官方实例构建的Vue应用,功能很简单,从本地上传一个文件,通过JSZip打包,然后使用file-saver将其下载到本地。

我们来直接试一下,上传一个1G+的文件会怎么样?

通过Chrome的任务管理器可以看到,当前的页面内存直接跳到了1G+

当然不排除有人的电脑内存比我们硬盘的都大的情况,豪不在乎内存消耗。

OK,即使你的电脑足以支撑在内存中进行随意的数据转换,但浏览器对Blob对象是有大小限制的。

官网的第一句话就是

If you need to save really large files bigger than the blob's size limitation or don't have enough RAM, then have a look at the more advanced StreamSaver.js如果您需要保存比blob的大小限制更大的文件,或者没有足够的内存,那么可以查看更高级的 StreamSaver.js

然后给出了不同浏览器所支持的Max Blob Size,可以看到Chrome2G

所以不管是出于内存考虑,还是Max Blob Size的限制,我们都有必要去探究一下流式的处理方案。

顺便说一下这个库并没有什么黑科技,它的下载方式和我们上面写的是一样的,只不过处理了一些兼容性问题。

浏览器流式API

Streams API是浏览器提供给JS的流式操作数据的接口。

其中包含有两个主要的接口:可读流、可写流

WritableStream

创建一个可写流对象,这个对象带有内置的背压和排队。

// 创建
const writableStream = new WritableStream({
  write(chunk) {
console.log(chunk)
  }
})
// 使用
const writer = writableStream.getWriter()
writer.write(1).then(() => {
  // 应当在 then 再写入下一个数据
writer.write(2)
})
  • 创建时传入write函数,在其中处理具体的写入逻辑(写入可读流)。

  • 使用时调用getWriter()获取流的写入器,之后调用write方法进行数据写入。

  • 此时的write方法是被包装后的,其会返回Promise用来控制背压,当允许写入数据时才会resolve

  • 背压控制策略参考CountQueuingStrategy,这里不细说。

ReadableStream

创建一个可读的二进制操作,controller.enqueue向流中放入数据,controller.close表明数据发送完毕。

下面的流每隔一秒就会产生一次数据:

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
}

调用getReader()可以获取流的读取器,之后调用read()便会开始读取数据,返回Promise

  • 如果流中没有数据,便会阻塞(Promise penging)。

  • 当调用了controller.enqueuecontroller.close后,Promise就会resolve

  • done:数据发送完毕,表示调用了controller.close

  • value:数据本身,表示调用了controller.enqueue

while (true)的写法在其他语言中是非常常见的,如果数据没有读完,我们就重复调用read(),直到donetrue

fetch请求的响应体和Blob都已经实现了ReadableStream

Fetch ReadableStream

Fetch API通过Response的属性body提供了一个具体的ReadableStream对象。

流式的读取服务端响应数据:

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
}

Blob ReadableStream

Blob对象的stream方法,会返回一个ReadableStream

当我们从本地上传文件时,文件对象File就是继承自Blob

流式的读取本地文件:

<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;
}
});

TransformStream

有了可读、可写流,我们就可以组合实现一个转换流,一端转换写入数据、一端读取数据。

我们利用MessageChannel在两方进行通信

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

在很多场景下我们都会这么去使用读写流,所以浏览器帮我们实现了一个标准的转换流:TransformStream

使用如下:

const {readable, writable} = new TransformStream()

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

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

以上就是我们需要知道的流式 API 的知识,接下来进入正题。

前端流式下载

ok,终于到了流式下载的部分。

这里我并不会推翻自己前面所说:

  • 只有页面级跳转会触发下载。

  • 这意味着响应数据直接被下载线程接管。

  • createObjectURLreadAsDataURL只能接收整个文件数据。

  • 这意味当数据在前端时,只能整体下载。

所以应该怎么做呢?

Service worker

是的,黑科技主角Service worker,熟悉PWA的人对它一定不陌生,它可以拦截浏览器的请求并提供离线缓存。

Service Worker APIService workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。-- MDN

这里有两个关键点:

  • 拦截请求

  • 构建响应

也就是说,通过Service worker前端完全可以自己充当服务器给下载线程传输数据。

让我们看看这是如何工作的。

拦截请求

请求的拦截非常简单,在Service worker中注册onfetch事件,所有的请求发送都会触发其回调。

通过event.request对象拿到Request对象,进而检查url决定是否要拦截。

如果确定要拦截,就调用event.respondWith并传入Response对象,既可完成拦截。

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

new Response

Response就是fetch()返回的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
}

可以看到,Response接收两个参数

  • 第一个是响应体Body,其类型可以是Blobstring等等,其中可以看到熟悉的ReadableStream可读流

  • 第二个是响应头、状态码等

这意味着:

  • 在响应头中写入Content-Disposition:attachment,浏览器就会让下载线程接管响应。

  • Body构建成ReadableStream,就可以流式的向下载线程传输数据。

也意味着前端自己就可以进行流式下载!

极简实现

我们构建一个最简的例子来将所有知识点串起来:从本地上传文件,流式的读取,流式的下载到本地。

是的这看似毫无意义,但这可以跑通流程,对学习来说足够了。

关键点代码分析

  • 通知service worker准备下载文件,等待worker返回urlwritable

const createDownloadStrean = async(filename) = >{ // 通过 channel 接受数据 
const {
port1,
port2
} = new MessageChannel();

// 传递 channel,这样 worker 就可以往回发送消息了
serviceworker.postMessage({
filename
},
[port2]);

return new Promise((resolve) = >{
port1.onmessage = ({
data
}) = >{
// 拿到url, 发起请求
iframe.src = data.url;
document.body.appendChild(iframe);
// 返回可写流
resolve(data.writable)
};
});
}
  • Service worker接受到消息,创建urlReadableStreamWritableStream,将urlWritableStream通过channel发送回去。

js self.onmessage = (event) = >{
const filename = event.data.filename // 拿到 channel 
const port2 = event.ports[0] // 随机一个 url 
const downloadUrl = self.registration.scope + Math.random() + '/' + filename // 创建转换流 
const {
readable,
writable
} = new TransformStream() // 记录 url 和可读流,用于后续拦截和响应构建 
map.set(downloadUrl, readable) // 传回 url 和可写流 
port2.postMessage({
download: downloadUrl,
writable
},
[writable])
}
  • 主线程拿到url发起请求(第 1 步onmessage中),Service worker拦截请求 ,使用上一步的ReadableStream创建Response并响应。

self.onfetch = event => { const url = event.request.url // 从 map 中取出流,存在表示这个请求是需要拦截的 
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'
})
// 构建返回响应
event.respondWith(
new Response(readableStream, { headers })
 )
}
  • 下载线程拿到响应,开启流式下载(但是此时根本没有数据写入,所以在此就阻塞了)

  • 主线程拿到上传的File对象,获取其ReadableStream并读取,将读取到的数据通过WritableStream(第 1 步中返回的)发送出去。

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) // 递归调用,直到读取完成 
return pump()
};
pump();
})
  • WritableStream写入数据时,下载线程中的ReadableStream就会接收到数据,文件就会开始下载直到完成。

完整代码

// 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 }))
}

流式压缩下载

跑通了流程之后,压缩也只不过是在传输流之前进行一层转换的事情。

首先我们寻找一个可以流式处理数据的压缩库(你肯定不会想自己写一遍压缩算法),fflate就很符合我们的需求。

然后我们只需要在写入数据前,让fflate先处理一遍数据就可以了。

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)
}
  });
});

是的,就是这么简单。

参考资料

标签: js