javascript - Angularjs - 将 blob 保存到不处理动态数据的文本文件

Question

我正在尝试设置按钮按钮或 anchor 以将一些文本下载到 .txt 文件中。使用 Jquery，我做了一个简单的 $('#copy_Output_logs').text();并且我的文本在我的控制台中正确显示。所以我设置了 href 链接，但我一直收到一个空白文件。据我所知，由于我的文本是在点击时动态加载的，所以这行不通。

所以我创建了一个在点击时执行的函数。但是我的主播一直打开一个带有这个奇怪 URL “http://localhost:8080/%7B%7B” 的页面。通过在按钮上设置 un ng-click 尝试了另一种方法，但下载对话框起作用(我需要)，它只是重定向到包含文本的页面。

到目前为止，这是我的代码:

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>肯定是行不通的，因为“点击”事件返回一个字符串，但没有对其进行任何操作。

<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>