Question

我正在尝试将典型的JavaScript库（JSZip）包含到我的angularjs应用程序中。

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

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

如何在角度应用程序中加载非角度相关性。我花了一整天。我没有发现任何线索。

我尝试了多种方法来动态获取依赖关系，还尝试使用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");
                });

Answer 1

Inject non-angular JS libraries

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

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

在你的模块 angular 中添加常量 '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");
    });
};

如何在angularjs（1.x）应用程序中使用JSzip外部库

1 个答案: