Angularjs - сохранение большого двоичного объекта в текстовый файл, не работающий с динамическими данными

Question

Я пытаюсь настроить кнопку или привязку кнопки, чтобы загрузить текст в файл .txtС помощью Jquery я делаю простой $ ('# copy_Output_logs'). Text ();и мой текст правильно в моей консоли.Поэтому я установил ссылку href, но постоянно получаю пустой файл.Насколько я понимаю, поскольку мой текст загружается динамически при нажатии, это не сработает.

Поэтому я создал функцию, которая будет выполняться при нажатии.Но мой якорь продолжает открывать страницу с этим странным URL "http://localhost:8080/%7B%7B".Попробовал альтернативный способ, установив н-н-клик по кнопке, но диалог загрузки не работает (что мне нужно), он просто перенаправляет на страницу с текстом.

Вот мой код:

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>

У кого-нибудь есть идея?

Answer 1

Для двух использованных вами способов, <button> наверняка не будет работать, поскольку событие «click» возвращает строку, и с ней ничего не делается.

Проблема с <a href="{{ Download() }}">является то, что он работает, когда компонент генерируется.Поэтому значение Blob, которое было создано, скорее всего, будет пустым.

В приведенном ниже коде я изменил логику, чтобы обновлять элемент «a» при щелчке по нему.Остальные остались прежними.

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' }));

        }

    }

});

Что касается HTML

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