React 前端实现流式下载数据，压缩成压缩包(zip)，上传解析下载

React 前端实现流式下载数据，压缩成压缩包(zip)下载
思路解析：React使用XMLHttpRequest进行请求，方便处理，也可以用框架自带的request方式处理，前端接受到后端传输的流式数据，在前端页面吧数据进行组装，这边用到file-saver，
压缩使用JsZip

import {saveAs } from 'file-saver';
#保存文件
import JsZip from 'jszip'
#把文件压缩成zip

const txtRequest = new XMLHttpRequest();
            // 实例化文本类型的请求
      txtRequest.open('GET', '/api/download/textFile', false);
            // 获取文本类型的请求
      txtRequest.setRequestHeader('Pragma', 'no-cache');
      txtRequest.send();

     //实例化压缩包类型的请求
      const tarRequest = new XMLHttpRequest();
      tarRequest.open('GET', '/api/download/tarFile', true);
      tarRequest.responseType='blob'
      //流式加载
      tarRequest.send();
      const { status, response, contentType } = tarRequest;
      //合并处理请求，代码可以自己优化
      tarRequest.onload = function () {
          const content = txtRequest.responseText;
          const sBlob = new Blob([content], { type: txtRequest.contentType });
          const blob = this.response
          const zip = new JsZip
          //吧下载的文件压缩到zip文件中
          // 添加txt文件
          zip.file('rules.json', sBlob)
          //添加压缩包
          zip.file('data_policy.tar', this.response)
          zip.generateAsync({type: "blob"}).then(function (content) {
              // 下载前端生成的压缩包
              saveAs(content, 'test.zip');
          });
      }
            

//解析zip上传的包
//我用的是最新的JsZip，解析方式和以前有点不同
//获取上传文件，这个按自己的实现方式
const selectedFile = document.getElementById('upload').files[0];
var new_zip = new JsZip();
//加载文件
new_zip.loadAsync(selectedFile).then(function(zip) {
//遍历zip里面包含的文件
zip.forEach(function (relativePath, zipEntry) { 
if(!zipEntry.dir){
  //  base64、string、text、binarystring、array、uint8array、arraybuffer、blob、nodebuffer;
 //按需求获取文件内容  zip.file(zipEntry.name).async("string").then(function (content) {
   console.log(content)
}