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

Question

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?

I'm surprised this isn't working, especially when everything seems to be synchronous. I'd love to see the generated <a> HTML. Obviously the button won't work since it's just getting a string back. — fingeron
– fingeron, Commented May 28, 2018 at 6:54

fingeron · Accepted Answer · 2018-05-28 07:08:16Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related