一、github 地址

二、安装下载

1、安装包

npm install streamsaver --save

2、使用过程中需要的其他文件下载

1、核心方法 zip-stream.js

https://jimmywarting.github.io/StreamSaver.js/examples/zip-stream.js

2、流服务器 mitm.html

https://github.com/jimmywarting/StreamSaver.js/blob/master/mitm.html 因为该静态资源相当于伪造一个服务器来下载文件，所以该文件保存位置可以放置与index.js 同目录下，方便后续访问

3、将文件处理为流 sw.js

https://github.com/jimmywarting/StreamSaver.js/blob/master/sw.js

三、具体实现

1、引入

import streamSaver from 'streamsaver

//引入之前下载的文件

import 'js/zip-stream.js'

*// 修复默认的流服务器地址原本的地址为 jimmywarting.github.io/StreamSaver…

现在将StreamSaver默认的mitm地址修改为我们之前下载的 mitm.html 的地址 streamSaver.mitm = "http://localhost:3000/mitm.html"

2、单文件下载

首先是要获取到你要下载的文件的blob,我这边的业务场景是直接通过后端返回的url然后fetch请求得到的

const blob = await ossRepository.download(url);
const fileName = file.name + file.type;`
const fileStream = streamSaver.createWriteStream(fileName, {size: blob.size,});
const readableStream = blob.stream();

if (window.WritableStream && readableStream.pipeTo) {
   return readableStream
      .pipeTo(fileStream)
      .then(() => {
        console.log("下载成功");
       });
 }

3、多文件或文件夹打包下载

与上面的单文件下载方式类似结合你的业务场景最终是要得到一个对象数组： let result = [{name:xxx,stream:xxx}]

const blob = await ossRepository.download(url, progress => { });
const fileName = resource.name + resource.type;
return [{ name: fileName, stream: () => blob.stream() }];

const fileStream = streamSaver.createWriteStream('合并下载.zip');
const readableZipStream = ZIP({
 pull(ctrl) {
   result.map(x => { //result 为上面获取的到的结果
      ctrl.enqueue(x);
});
  ctrl.close();
 },
});

if (window.WritableStream && readableZipStream.pipeTo) {
  return readableZipStream.pipeTo(fileStream).then(() => console.log('打包下载成功'));
}

4、小结

上面与大家分享streamsaver的一些简单使用方法更多的使用方式可以参考 github.com/jimmywartin…

【StreamSaver】实践 大文件打包下载（>2GB）

一 、github 地址

二 、安装下载