Angular 2 - 从字节数组创建 Zip答案

【问题标题】：Angular 2 - Creating Zip from byte arraysAngular 2 - 从字节数组创建 Zip
【发布时间】：2018-02-16 08:34:07
【问题描述】：

我正在寻找有关如何将多个文件（当前在客户端作为 base64 字符串）保存为 Angular 2 中的 zip 目录的方向。

我目前正在从我的 webapi 获取文件作为 base64 字符串。我将字符串转换为 byte[] 以使用pdf-viewer 查看。我还允许用户使用file-saver 保存/打印 pdf。

现在，我想允许用户将所有选定的文件下载到一个 zip 文件夹中。不幸的是，我并不完全理解 blob 等，因此需要一些帮助来解决这个问题。请记住，从 webapi 返回的对象包含每个文件的 base64 字符串，但可以轻松转换为 byte[] 和 blob。

【问题讨论】：

标签： angular pdf zip blob

【解决方案1】：

对于那些可能发现自己处于这个位置的人，我提出的解决方案利用了我现有的代码，只需要添加JSZip。代码：

public downloadAllFiles() {
    console.log("Downloading All Files");
    var fileName = this.defaultDataService.defaultDataBase + "-" + this.selectedYear.path + ".zip";
    var zip = new JSZip();

    var year = zip.folder(this.selectedYear.path);

    for (var i = 0; i < this.selectedTypes.length; i++) {            
        var subDir = year.folder(this.selectedTypes[i].path);
        for (var j = 0; j < this.selectedTypes[i].pdfList.length; j++) {
            subDir.file(this.selectedTypes[i].pdfList[j].name + ".pdf", this.createPdfBlob(this.convertBase64ToBytes(this.selectedTypes[i].pdfList[j].bytes)));
        }
    }

    zip.generateAsync({ type: "blob" })
        .then(function (blob) {
            FileSaver.saveAs(blob, fileName);
        });
}

convertBase64ToBytes(data: string) {
    let byteCharacters = atob(data);
    let byteNumbers = new Array(byteCharacters.length);

    for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }

    let byteArray = new Uint8Array(byteNumbers);
    return byteArray;
}

createPdfBlob(src: any) {
    const byteArrays = [];
    byteArrays.push(src);
    return new Blob(byteArrays, { type: 'application/pdf' });
}

【讨论】：