Angular 4将base64图像数组下载为ZIP文件答案

【问题标题】：Angular 4 Download array of base64 images as ZIP fileAngular 4将base64图像数组下载为ZIP文件
【发布时间】：2019-12-14 08:48:32
【问题描述】：

我正在使用 Typescript 使用 Angular2 v4 应用程序，我需要一种将许多图像（base64 格式）下载到 Zip 文件中的方法。

例如：我有一个这样的数组（例如假 base64 图像）

data = [
  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA ...',
  'data:image/png;base64, iVBTYu0KGgoBBBBNSUhYUgJJJJUA ...',
  'data:image/png;base64, CGBHHFGY0goAAAANSUhEUgAAAAUA ...',
  ...
]

我需要一种方法来下载它，首先将每个图像转换为 .jpg 或 .png 图像，然后编译所有图像并下载为 zip 文件。像这样的东西（我不知道代码，我只需要这样的东西）

downloadZip() {
  const arrayAsJPG = [];
  this.data.forEach(i => {
    const imageInJpg = i.convertToJPGfile(); // this is not code, this is a function that converts the base64 to a jpg file
    arrayAsJPG.push(imageInJpg);
  });
  ZipFileSaver.save(arrayAsJPG, 'myImageReport.zip'); // this isn't code neither, just and interpretation of what I need

}

有什么办法吗？

【问题讨论】：

在浏览器中还是在从您的 Angular 应用程序调用的基于 node.js 的服务器函数中？

标签： angular image typescript download zip

【解决方案1】：

您可能需要在 Node 中的服务器上执行此操作。

你有两个问题：

将数据字符串转换为图像

这在浏览器中很难。您可以将数据字符串呈现为 img 标签 src 并通过 javascript 触发图像下载。我不认为您可以在浏览器中将其写入磁盘，以便 zip 文件实用程序可以使用它。不过，这在 Node 中是微不足道的。

创建 zip 文件

您应该使用 NPM 包。大多数都面向 Node.js。您可能很幸运可以使用 JSZip 之类的方式直接在浏览器中创建 zip 文件。在 Google 中搜索“npm zip”以查看许多其他包。

【讨论】：

链接的 JSZip 主页上提供的示例包括以 base64 表示的图像（在本例中为 gif），并将其添加到 zip 文件中。我建议遵循这种模式。根据您的要求，您应该能够在客户端或服务器端使用此库
除非文件很大或在下载前需要大量处理，否则在浏览器中将其转换为 zip 文件应该是完全可以的。 JSZip 只是将字符串缓冲区转换为不同的格式，因此在浏览器中应该同样简单。

【解决方案2】：

@gary 给出了很好的解释。我在stackoverflow上找到了一些例子：

Is it possible to generate zip file and download in Angular 4?

Converting base64 to blob in javascript 也可以使用@types/jszip。

我构建了一个执行以下操作的示例：

它从 API（模拟）获取您所描述的数组；
它将该数组的每个项目转换为一个 blob；
它将 blob 作为文件添加到 zip 文件中；
最后创建 zip 文件；
我只有 png base64，所以把它改成 jpg。

https://stackblitz.com/edit/angular-jzqtrk?file=src%2Fapp%2Fapp.component.ts

【讨论】：