W jaki sposób udostępniasz plik do pobrania za pomocą AngularJS lub Javascript?

Mam tekst w ukrytym obszarze tekstu. Po kliknięciu przycisku chciałbym, aby tekst był oferowany do pobrania jako .txtplik. Czy jest to możliwe przy użyciu AngularJS lub Javascript?

Możesz zrobić coś takiego za pomocą Blob.

<a download="content.txt" ng-href="{{ url }}">download</a>

w kontrolerze:

var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

aby włączyć adres URL:

app = angular.module(...);
app.config(['$compileProvider',
    function ($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);

Proszę to zanotować

Za każdym razem, gdy wywołujesz metodę createObjectURL (), tworzony jest nowy adres URL obiektu, nawet jeśli został już utworzony dla tego samego obiektu. Każdy z nich musi zostać zwolniony przez wywołanie URL.revokeObjectURL (), gdy nie są już potrzebne. Przeglądarki zwolnią je automatycznie po wyładowaniu dokumentu; jednak w celu uzyskania optymalnej wydajności i wykorzystania pamięci, jeśli są bezpieczne czasy, w których można je jawnie zwolnić, należy to zrobić.

Źródło: MDN

Wystarczy kliknąć przycisk, aby pobrać za pomocą następującego kodu.

w html

<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>

W kontrolerze

$scope.saveJSON = function () {
			$scope.toJSON = '';
			$scope.toJSON = angular.toJson($scope.data);
			var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });			
			var downloadLink = angular.element('<a></a>');
                        downloadLink.attr('href',window.URL.createObjectURL(blob));
                        downloadLink.attr('download', 'fileName.json');
			downloadLink[0].click();
		};

Spróbuj tego

<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">

i odwiedź tę stronę, może być dla Ciebie pomocna :)

http://docs.angularjs.org/guide/

Można to zrobić w javascript bez konieczności otwierania innego okna przeglądarki.

window.location.assign('url');

Zastąp „url” linkiem do pliku. Możesz umieścić to w funkcji i wywołać ją, ng-clickjeśli chcesz uruchomić pobieranie z przycisku.

W naszym obecnym projekcie w pracy mieliśmy niewidoczny element iFrame i musiałem podać adres URL pliku do elementu iFrame, aby uzyskać okno dialogowe pobierania. Po kliknięciu przycisku kontroler generuje dynamiczny adres URL i wyzwala zdarzenie $ scope, w którym plik niestandardowydirective znajduje się lista którą napisałem. Dyrektywa doda element iFrame do treści, jeśli jeszcze nie istnieje, i ustawi dla niego atrybut url.

EDYCJA: Dodanie dyrektywy

appModule.directive('fileDownload', function ($compile) {
    var fd = {
        restrict: 'A',
        link: function (scope, iElement, iAttrs) {

            scope.$on("downloadFile", function (e, url) {
                var iFrame = iElement.find("iframe");
                if (!(iFrame && iFrame.length > 0)) {
                    iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
                    iElement.append(iFrame);
                }

                iFrame.attr("src", url);


            });
        }
    };

    return fd;
});

Ta dyrektywa odpowiada na zdarzenie kontrolera o nazwie downloadFile

więc w kontrolerze robisz

$scope.$broadcast("downloadFile", url);

Można ustawić location.hrefdo danych URI zawierający dane, które chcesz pozwolić pobieranie użytkownika. Poza tym nie sądzę, aby można było to zrobić za pomocą samego JavaScript.

Chciałbym tylko dodać, że w przypadku, gdy nie pobierze pliku z powodu niebezpiecznego: blob: null ... kiedy najedziesz kursorem na przycisk pobierania, musisz go wyczyścić. Na przykład,

var app = angular.module ('aplikacja', []);

app.config (function ($ compileProvider) {

$compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);

Jeśli masz dostęp do na serwerze, rozważ ustawienie nagłówków zgodnie z odpowiedzią na to bardziej ogólne pytanie .

Content-Type: application/octet-stream
Content-Disposition: attachment;filename=\"filename.xxx\"

Czytając komentarze do tej odpowiedzi, zaleca się użycie bardziej szczegółowego typu treści niż strumień oktetu.

Miałem ten sam problem i spędziłem wiele godzin na szukaniu różnych rozwiązań, a teraz dołączam do wszystkich komentarzy w tym poście. Mam nadzieję, że będzie pomocna, moja odpowiedź została poprawnie przetestowana na Internet Explorerze 11, Chrome i FireFoxie.

HTML:

<a href="#" class="btn btn-default" file-name="'fileName.extension'"  ng-click="getFile()" file-download="myBlobObject"><i class="fa fa-file-excel-o"></i></a>

DYREKTYWA:

directive('fileDownload',function(){
    return{
        restrict:'A',
        scope:{
            fileDownload:'=',
            fileName:'=',
        },

        link:function(scope,elem,atrs){


            scope.$watch('fileDownload',function(newValue, oldValue){

                if(newValue!=undefined && newValue!=null){
                    console.debug('Downloading a new file'); 
                    var isFirefox = typeof InstallTrigger !== 'undefined';
                    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
                    var isIE = /*@cc_on!@*/false || !!document.documentMode;
                    var isEdge = !isIE && !!window.StyleMedia;
                    var isChrome = !!window.chrome && !!window.chrome.webstore;
                    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
                    var isBlink = (isChrome || isOpera) && !!window.CSS;

                    if(isFirefox || isIE || isChrome){
                        if(isChrome){
                            console.log('Manage Google Chrome download');
                            var url = window.URL || window.webkitURL;
                            var fileURL = url.createObjectURL(scope.fileDownload);
                            var downloadLink = angular.element('<a></a>');//create a new  <a> tag element
                            downloadLink.attr('href',fileURL);
                            downloadLink.attr('download',scope.fileName);
                            downloadLink.attr('target','_self');
                            downloadLink[0].click();//call click function
                            url.revokeObjectURL(fileURL);//revoke the object from URL
                        }
                        if(isIE){
                            console.log('Manage IE download>10');
                            window.navigator.msSaveOrOpenBlob(scope.fileDownload,scope.fileName); 
                        }
                        if(isFirefox){
                            console.log('Manage Mozilla Firefox download');
                            var url = window.URL || window.webkitURL;
                            var fileURL = url.createObjectURL(scope.fileDownload);
                            var a=elem[0];//recover the <a> tag from directive
                            a.href=fileURL;
                            a.download=scope.fileName;
                            a.target='_self';
                            a.click();//we call click function
                        }


                    }else{
                        alert('SORRY YOUR BROWSER IS NOT COMPATIBLE');
                    }
                }
            });

        }
    }
})

W KONTROLERZE:

$scope.myBlobObject=undefined;
$scope.getFile=function(){
        console.log('download started, you can show a wating animation');
        serviceAsPromise.getStream({param1:'data1',param1:'data2', ...})
        .then(function(data){//is important that the data was returned as Aray Buffer
                console.log('Stream download complete, stop animation!');
                $scope.myBlobObject=new Blob([data],{ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        },function(fail){
                console.log('Download Error, stop animation and show error message');
                                    $scope.myBlobObject=[];
                                });
                            }; 

CZYNNY:

function getStream(params){
                 console.log("RUNNING");
                 var deferred = $q.defer();

                 $http({
                     url:'../downloadURL/',
                     method:"PUT",//you can use also GET or POST
                     data:params,
                     headers:{'Content-type': 'application/json'},
                     responseType : 'arraybuffer',//THIS IS IMPORTANT
                    })
                    .success(function (data) {
                        console.debug("SUCCESS");
                        deferred.resolve(data);
                    }).error(function (data) {
                         console.error("ERROR");
                         deferred.reject(data);
                    });

                 return deferred.promise;
                };

BACKEND (na WIOSNĘ):

@RequestMapping(value = "/downloadURL/", method = RequestMethod.PUT)
public void downloadExcel(HttpServletResponse response,
        @RequestBody Map<String,String> spParams
        ) throws IOException {
        OutputStream outStream=null;
outStream = response.getOutputStream();//is important manage the exceptions here
ObjectThatWritesOnOutputStream myWriter= new ObjectThatWritesOnOutputStream();// note that this object doesn exist on JAVA,
ObjectThatWritesOnOutputStream.write(outStream);//you can configure more things here
outStream.flush();
return;
}

To zadziałało dla mnie w kątowym:

var a = document.createElement("a");
a.href = 'fileURL';
a.download = 'fileName';
a.click();

Nie chciałem statycznego adresu URL. Mam AjaxFactory do wykonywania wszystkich operacji Ajax. Pobieram adres URL z fabryki i wiążę go w następujący sposób.

<a target="_self" href="{{ file.downloadUrl + '/' + order.OrderId + '/' + fileName }}" download="{{fileName}}">{{fileName}}</a>

Dzięki @AhlemMustapha