在 Angular 2 项目中引入 JSZip

Question

在我的Angular 2项目中导入JSZip库时遇到了麻烦。

我按照以下步骤更改项目配置:

1 - 使用NPM安装JSZip

npm install jszip --save

2 - 将systemjs.config.js更改如下

var map = {
    ...
    'jszip':                      'node_modules/jszip/dist/jszip.min.js'
};

3 - 将依赖项导入需要它的组件中

import JSZip from 'jszip';

然后，我尝试使用主JSZip构造函数附加一些文件，但是我收到了一个网络错误，该错误指出构造函数未定义。此外，我使用的Typescript编辑器无法找到其定义。

我有什么遗漏吗？

谢谢。

- AlexKibo88

Answer 1

对于那些想知道问题如何解决的人，问题出在导入上。 以下是正确的导入方式：

import * as JSZip from 'jszip';

然后，它的使用方式如下：

let zipFile: JSZip = new JSZip();

- AlexKibo88

---

如果您正在使用JSZip 3.x，您也可以通过以下方式获取TypeScript类型定义：https://www.npmjs.com/package/@types/jszip - StephenD

当我尝试使用您的解决方案时，出现了错误“Unexpected token ':'”。 在 main.js:32023 中的 Object../node_modules/setimmediate/setImmediate.js。 - coinhndp

Answer 2

有一个错别字，应该是：

import * as JSZip from 'jszip';
let zipFile: JSZip = new JSZip();

- Yunfei Li

Answer 3

在当前的JSZip版本（3.10.1）中，我们需要使用以下命令：

import JSZip from 'jszip';

然后使用：

let zipFile: JSZip = new JSZip();

在谷歌上搜索了一段时间后，我不得不阅读JSZip的TypeScript代码才找到了答案。希望这能帮助其他人。

- Hua Thi Le