角11 -使用JSZip添加文件压缩
我正在尝试将几个txt文件添加到一个zip文件中并在本地下载。
为此，我使用的是库: JSZip和FileSaver。
这是下载按钮的“类型记录”代码：
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);
});此代码使用一个readme.txt文件和一个空的txt文件夹成功下载zip文件。txt文件夹应该包含从"downloadService“服务获得的txt文件。
当然，删除对返回文件的服务的调用，并放置一个硬编码的基本64文件，如果我们正确地生成zip及其txt文件夹和其中对应的文件，并且所有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文件夹中。但我需要生成一个压缩文件。FileSaver.saveAs在恢复文件的循环中，将为每个文件生成一个zip，如果它添加了我需要的所有文件，则在最后一个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中。
根据我们选择的文件，例如，如果我们有2个文件，则服务的响应如下：
调用一个文件：
{"errorMessages":[],"output": "data:text/plain;base64,VGVzdCBJbmZyYTEw"}调用一个文件：
{"errorMessages":[],"output": "data:text/plain;base64,VGVzdCBJbmZyYTEy"}base641变量包含txt文件的base64代码。
简而言之，当我硬编码base64代码时，它可以很好地工作，并压缩具有相同内容的文件，但是如果我试图通过调用"downloadFile“服务动态获取base64代码，它不会将它们添加到txt文件夹中的zip中，也不会出现任何错误。
谢谢,
回答 2
Stack Overflow用户
发布于 2022-05-04 06:53:14
我还不能使用叉子，但在这种情况下，我可以根据需要工作：
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);
});
}
});})；
Stack Overflow用户
发布于 2022-04-29 13:59:14
问题是您的下载服务正在异步地执行一些可以观察到的操作。您需要移动.subscribe块。就像这样
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);
});
});
});https://stackoverflow.com/questions/72058579
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号