如何在 angularjs(1.x) 应用程序中使用 JSzip 外部库答案

【问题标题】：How to use JSzip external library in angularjs(1.x) application如何在 angularjs(1.x) 应用程序中使用 JSzip 外部库
【发布时间】：2019-06-14 11:20:26
【问题描述】：

我正在尝试将典型的 javascript 库 (JSZip) 包含到我的 angularjs 应用程序中。

首先，我将包含的 JSZip 库添加到我的应用程序中，然后将脚本引用添加到我的索引页面。

接下来我在我的一个模块中创建了一个简单的 JSZip 对象并尝试创建 zip。但是突然之间，我在 VS2015（visual studio）中构建我的应用程序时在 typescript 中遇到编译错误，说“找不到名称 JSZip”。

如何在 Angular 应用程序中加载非 Angular 依赖。我已经度过了整整一天。我没有找到任何线索。

我尝试了多种方法来动态获取依赖项，还尝试了 oclazyload 加载 JSZip 依赖项..但没有帮助。

            var zip = new JSZip(); <=== this is where the problem is..
            zip.file("File1", atob(response.Data));
            zip.file("File2", atob(response.Data));
            zip.generateAsync({ type: "blob" })
                .then(function (content) {
                    // saveAs is from FileSaver.js
                    saveAs(content, "example.zip");
                });

【问题讨论】：

标签： angularjs jszip

【解决方案1】：

Inject non-angular JS libraries

将 JS 文件包含到您的 HTML 文件中

<script src="http://stuk.github.io/jszip/dist/jszip.js"></script>

例如，在您的模块角度添加常量“jszip”

var app = angular.module('myApp', [])
  .constant('jszip', window.JSZip)
  .run(function($rootScope) {
    $rootScope.JSZip = window.JSZip;
})

在你的控制器中注入'jszip'，你的问题就解决了

app.controller('myCtrl', function($scope, 'jszip') {
  var zip = new jszip();
  ...
});

对于下载部分（saveAs 功能），将FileSaver.js 包含到您的 HTML 文件中

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js"></script>

例如在你的控制器中

$scope.exportZip = function(){
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");

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

【讨论】：