Angular 11 - 使用 JSZip 库压缩

埃莱德拉多尔

我必须在一个 zip 中压缩几个 txt 文件，这些文件来自 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 文件添加一个动态名称。为此，我创建了一个类属性，在其中存储名称“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”，其实如果我去一个在线网站解码它，它会正确返回txt文件。

我没有收到任何错误。

你可以帮帮我吗？谢谢，

大卫丰特斯

对于第一个问题，我建议阅读添加 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关键字不指向类实例（因此是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(/.*/);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。