我正在try 将几个txt文件添加到zip文件中,并在本地下载.

为此,我使用了库:JSZip和FileSaver.

这是下载按钮的"typescript"代码:

let zip = new JSZip();
zip.file("readme.txt", "Files required");
let txtFile = zip.folder("txt");
this.selectedItems?.forEach((item.name) => {
this.downloadService
.downloadFile(item.name)
.subscribe((response) => {
  let base64 = response.output.split(",");
  txtFile.file(item.name, base64[1], {base64: true});
});
});
zip.generateAsync({type:"blob"})
.then((content) => {
// see FileSaver.js
FileSaver.saveAs(content, this.fileZipName);
});

这段代码,下载zip文件成功,带有自述文件.txt文件和一个空的txt文件夹.txt文件夹应包含从"downloadService"服务获得的txt文件.

当然,删除对返回文件的服务的调用,并放入硬编码的base 64文件,前提是我们正确地生成了包含txt文件夹和其中相应文件的zip,所有txt文件中的内容都相同,因为它是硬编码的.

let zip = new JSZip();
zip.file("readme.txt", "Files required");
let txtFile = zip.folder("txt");
this.selectedItems?.forEach((item) => {
txtFile.file(item.name, "VGVzdCBBbGltXzEw", {base64: true});
});
zip.generateAsync({type:"blob"})
.then((content) => {
// see FileSaver.js
FileSaver.saveAs(content, this.fileZipName);
});

我用我目前正在测试的代码更新了这个问题,这会根据处理的文件生成几个zip,最后一个zip是将文件添加到txt文件夹.但我需要生成一个zip文件.文件保存器.saveAs位于恢复文件的循环中,将 for each 文件生成一个zip,在最后一个zip中,如果它添加了我需要的所有文件.

let zip = new JSZip();
zip.file("readme.txt", "Files required");
let txtFile = zip.folder("txt");
this.selectedItems?.forEach((item) => {
this.downloadService.downloadFile(item.name)
  .subscribe((response) => {
    let base64 = response.output.split(",");
    txtFile.file(item.name, base64[1], {base64: true});
    zip.generateAsync({type:"blob"})
      .then((content) => {
      // see FileSaver.js
      FileSaver.saveAs(content, this.fileZipName);
    });
  });
});

selectedItems:它是一个包含文件的对象数组,name属性包含文件名.

我不知道如何调用"downloadFile"服务,以便对存在的每个文件进行相应的调用,以获取base64并将其添加到zip.

根据我们 Select 的文件,例如,如果我们有2个文件,服务的响应如下:

调用一个文件:

{"errorMessages":[],"output": "data:text/plain;base64,VGVzdCBJbmZyYTEw"}

调用一个文件:

{"errorMessages":[],"output": "data:text/plain;base64,VGVzdCBJbmZyYTEy"}

base64[1]变量包含txt文件的base64代码.

简而言之,当我硬编码base64代码时,它可以很好地工作,并压缩具有相同内容的文件,但如果我试图通过调用"downloadFile"服务动态获取base64代码,它不会将它们添加到txt文件夹的zip中,也不会给出任何错误.

谢谢

推荐答案

我无法使用forkjoin,但我可以根据需要使用此条件:

let zip = new JSZip();
zip.file("readme.txt", "Files required");
let txtFile = zip.folder("txt");
let i = 0;
this.selectedItems?.forEach((item) => {
this.downloadService.downloadFile(item.name)
  .subscribe((response) => {
    let base64 = response.output.split(",");
    txtFile.file(item.name, base64[1], {base64: true});
    i++;
    if (i === this.selectedItems.length) { // I have added this condition
      zip.generateAsync({type:"blob"})
      .then((content) => {
        // see FileSaver.js
        FileSaver.saveAs(content, this.fileZipName);
      });
    }
  });

});

Typescript相关问答推荐

类的对象键没有在构造函数中初始化或分配.为什么引用它会掩盖错误?

与Prettify助手类型中的对象相交?

如何将@for的结果绑定到变量?

如何使用Generics保留构造函数的类型信息?

net::BER_RECTION_REUSED和Uncatch使用Axios和TanStack-Query useMutation时未捕获错误(DelivercMutation)

在TypeScript中使用泛型的灵活返回值类型

类型脚本接口索引签名

React typescribe Jest调用函数

如何缩小变量访问的对象属性范围?

键集分页顺序/时间戳上的筛选器,精度不相同

具有泛型类方法的类方法修饰符

表单嵌套太深

如何在使用条件类型时使用void

API文件夹内的工作员getAuth()帮助器返回:{UserID:空}

将对象的属性转换为正确类型和位置的函数参数

界面中数组中的混合类型导致打字错误

TypeScrip:如何缩小具有联合类型属性的对象

使用&reaction测试库&如何使用提供程序包装我的所有测试组件

如何知道使用TypeScript时是否在临时工作流内运行

有没有一种简单的方法可以访问Keyboard Shortcuts JSON文件中列出的每个命令的显示名称(标题)?