CODEWITHSUNDEEP
javascriptangularjs
Daniel Ellison
Daniel Ellison

Reputation: 1349

Angularjs - Save blob to a text file not working on dynamic data

Im trying to setup a button button or anchor to download some text into a .txt file. With Jquery I do a simple $('#copy_Output_logs').text(); and my text up correctly in my console. So I setup the href link but I keep getting a blank file. To my understading, since my text is loaded dynamically on click, this wont work.

So I created a function that would execute on click. But my anchor keeps opening a page with this weird URL "http://localhost:8080/%7B%7B". Tried an alternatif way by setting un a ng-click on a button but the download dialog dosent work (which I need), it just redirects to the page with the text.

Here's my code so far:

App.controller('Forumlaire_Controller', function ($scope, Shared_Service) {

    $scope.Download = function() {
        return Shared_Service.Service_download();
    } 

})
.config( function($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);
});


App.factory('Shared_Service', function($q) {

    return {

        Service_download: function() {  
            var url = $window.URL || $window.webkitURL;
            var data = $('#copy_Output_logs').text();

            console.log($('#copy_Output_logs').text()) // On ng-click the text showup correctly
            console.log(url.createObjectURL(new Blob([data], { type: 'text/plain' }))); //Via ng-click the url generates correctly in the console.

            return url.createObjectURL(new Blob([data], { type: 'text/plain' }));

        }

    }

});

HTML:

<a download="content.txt" href={{ Download() }} target="_blank" >Download</a>
<button ng-click="Download()" >Alternatif</button>

ANyone have an idea?

Upvotes: 1

Views: 966

Answers (1)

fingeron
fingeron

Reputation: 1182

For the two usages you gave, the <button> for sure won't work,since the "click" event returns a string and nothing is done with it.

The problem with the <a href="{{ Download() }}"> is that it runs when component is generated. Therefore the value of the Blob that was created is very likely to be empty.

In the code below, I changed the logic to update the "a" element when it is being clicked. The rest stayed exactly the same.

App.controller('Forumlaire_Controller', function ($scope, Shared_Service) {

    $scope.Download = function() {
        var a = document.getElementById("downloadLink"),
            url = Shared_Service.Service_download();

        a.href = url;
        a.target = "_blank";
        a.download = "filename.txt";
    } 

})
.config( function($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);
});


App.factory('Shared_Service', function($q) {

    return {

        Service_download: function() {  
            var url = $window.URL || $window.webkitURL;
            var data = $('#copy_Output_logs').text();

            console.log($('#copy_Output_logs').text()) // On ng-click the text showup correctly
            console.log(url.createObjectURL(new Blob([data], { type: 'text/plain' }))); //Via ng-click the url generates correctly in the console.

            return url.createObjectURL(new Blob([data], { type: 'text/plain' }));

        }

    }

});

As for the HTML

<a href="#" id="downloadLink" ng-click="Download()">Download</a>

Upvotes: 1

Related Questions