alferov/angular-file-saver

Don't get it working...

Opened this issue · 2 comments

eugenevk commented

Hi,
Can you please help? I am trying to implement the filesaver, but can't get it working. Nothing happens when I click the Download button.
I have the following defined in my index.html :

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular-file-saver/dist/angular-file-saver.js"></script>
<script type="text/javascript" src="js/angular-file-saver/dist/angular-file-saver.bundle.js"></script>
<script type="text/javascript" src="app/app.js"></script>

The textarea in index.html looks as follows:

<div class="wrapper" ng-controller="FileSaveCtrl as vm">
  <textarea
    ng-model="vm.val.text"
    name="textarea" rows="5" cols="20">
      Hey ho let's go!
  </textarea>
  <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
    Download
  </a>
</div>

The app.js is as follows:

var app = angular.module('psApp', [
        "ngSanitize",
        "ngFileSaver"
]);

app.controller('FileSaveCtrl', ['$scope', 'FileSaver', 'Blob', function FileSaveCtrl($scope, FileSaver, Blob) {
    $scope.val = {
        text: 'Hey ho lets go!'
    };

    $scope.download = function(text) {
        var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(data, 'text.txt');
    };
}]);
merrillmatt commented

@eugenevk, it looks like the issue is related to mixing "attach to $scope" style with controller as syntax. Either remove the controller as syntax from your view or modify your controller so that it properly implements the controller as syntax.

  • 👍2
alferov commented

@eugenevk, @merrillmatt is right. In your case, the view template should look like

<div class="wrapper" ng-controller="FileSaveCtrl">
  <textarea
    ng-model="val.text"
    name="textarea" rows="5" cols="20">
      Hey ho let's go!
  </textarea>
  <a href="" class="btn btn-dark btn-small" ng-click="download(val.text)">
    Download
  </a>
</div>

P.S: There is no need to include angular-file-saver.js if angular-file-saver.bundle.js is included already.
angular-file-saver.bundle.js = angular-file-saver.js + polyfills (Blob.js, FileSaver.js)

  • 👍1