Angular 11 - 使用 JSZip 库压缩

Question

我必须将几个 txt 文件压缩到一个 zip 文件中，这些文件是 base64 格式的服务响应。

这是在“txt”文件夹下下载 zip 及其压缩的 txt 文件的代码：

let zip = new JSZip();
zip.file("readme.txt", "Description content");
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(function(content) {
  // see FileSaver.js
  FileSaver.saveAs(content, "fileTxt.zip");
});

“selectedItems”：是一个包含多个文件的对象数组，如果存在，将被压缩到 zip 文件的“txt”文件夹中，“item.name”是属性具有文件名称的对象数组..

我有两个问题：

1. zip 文件的动态名称

我需要为 zip 文件添加一个动态名称。为此，我创建了一个 class 属性，我在其中存储名称“fileZipName”（fileZipName 的值，我在组件的 onInit 事件中分配它）。

  zip.generateAsync({type:"blob"})
  .then(function(content) {
      // see FileSaver.js
      FileSaver.saveAs(content, this.fileZipName);
  });

当在“then”中使用变量“fileZipName”时，它在浏览器控制台中显示以下错误：

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'fileZipName')
TypeError: Cannot read properties of undefined (reading 'fileZipName')

2. 添加文件到 zip

如果我给它一个固定的名字，例如“filesTxt.zip”，它工作正常，它会正确生成 zip 文件，它在 zip 中包含“readme.txt”文件，它添加zip中的“txt”文件夹，但是“txt”文件夹里面没有显示我需要压缩的文件，“txt”文件夹是空的。

“base64[1]”，包含 txt 文件的 base64 代码：“VGVzdCBJbmZyYTEw”，事实上，如果我去在线网站对其进行解码，它 returns txt 文件是正确的。

我没有收到任何错误。

你能帮帮我吗？谢谢，

Answer 1

对于第一个问题，我建议阅读添加 JavaScript 上下文以了解您遇到的问题，但为了解决您的问题，只需将传统的函数表达式替换为箭头函数表达式，所以：

来自

zip.generateAsync({type:"blob"})
  .then(function(content) {
    // see FileSaver.js
    FileSaver.saveAs(content, this.fileZipName);
});

到

zip.generateAsync({type:"blob"})
  .then((content) => {
    // see FileSaver.js
    FileSaver.saveAs(content, this.fileZipName);
});

在第一个表达式中，this 关键字未指向 class 实例（因此 undefined 值），而在第二个表达式中，它是。

对于第二个问题，我从未使用过 JSZip，但根据文档，我了解到 folder 函数只会在输出 zip 上创建一个文件夹。为了拥有它的子文件，你需要自己添加它们。

let zip = new JSZip();
zip.file("readme.txt", "Description content");

// Option 1 (manually add all the files)
let txtFile = zip.folder("txt").file('file1.txt').file('file2.txt');
// Option 2 (add all subfiles indiscriminately) - Did not test this
let txtFile = zip.folder("txt").file(/.*/);

Angular 11 - 使用 JSZip 库压缩

Angular 11 - Compress using JSZip library

typescript

jszip

filesaver.js

angular