在Angular 4中是否可以生成并下载zip文件？

Question

我是Angular 4的初学者。我参考了很多链接来生成Zip文件，但我没能找到合适的解决方案。
在Angular 4中是否有可能生成Zip文件？
如果可能的话，应该怎么做呢？

- Kiran Joshi

---

生成zip文件（或任何文件）不依赖于Angular。有JavaScript解决方案可以在客户端生成文件。请查看JSZip，看看是否可以将其与Angular集成。 - zfor

@zfor 感谢您的解决方案，但我该如何做呢？您对Angular和JavaScript有什么想法吗？ - Kiran Joshi

Answer 1

安装库

$ npm install --save npm install jszip

在一个名为 tsconfig.json 的文件中

{"compilerOptions": {"paths": {
  "jszip": ["../node_modules/jszip/dist/jszip.min.js"]
}}}

在一个名为 demo.component.ts 的文件中。

import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
import * as JSZip from 'jszip';

在 demo.component.ts 文件中的函数。

downloadFileExample() {
  const jszip = new JSZip();
  jszip.file('Hello.txt', 'Hello World\n');

  jszip.generateAsync({ type: 'blob' }).then(function(content) {
    // see FileSaver.js
    saveAs(content, 'example.zip');
  });
}

这个例子是使用Angular 6的。

- sercheo_87

---

如果您添加 npm install @types/jszip，则可用 typings。 - Robin De Schepper

我们如何在单个zip文件中下载多个文件？ - ResolveError

这是一个示例 download-multiple-files.js。 - sercheo_87

Answer 2

您可以在Angular中使用任何JS库。例如，您可以使用JSzip，然后只需：

import * as JSZip from 'jszip';

现在您将可以访问这个库的方法。您可以阅读有关在 Angular 中使用纯 JS 库的更多信息。有很多关于它的信息，甚至有清晰的说明如何正确地操作和使用它。我认为，如果您深入研究这个主题，而不是逐步获得清晰的说明，那会更好。您将学到更多，并且如果将来遇到这样的问题，您将轻松解决它。我希望这些建议能对您有所帮助。

- Adrian Sawicki

---

您可以使用此链接 => https://dev59.com/qaXja4cB1Zd3GeqPLhFF - Himanshu