AngularJS veya Javascript ile bir dosyayı indirmek için nasıl sunarsınız?

Gizli bir metin alanında bazı metinlerim var. Bir düğmeye tıklandığında, metnin bir .txtdosya olarak indirilmek üzere sunulmasını istiyorum . Bu, AngularJS veya Javascript kullanılarak mümkün müdür?

Kullanarak böyle bir şey yapabilirsiniz Blob.

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

denetleyicinizde:

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

URL'yi etkinleştirmek için:

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

Lütfen bunu not al

CreateObjectURL () öğesini her çağırdığınızda, aynı nesne için zaten bir tane oluşturmuş olsanız bile yeni bir nesne URL'si oluşturulur. Artık ihtiyacınız kalmadığında URL.revokeObjectURL () çağrılarak bunların her biri serbest bırakılmalıdır. Tarayıcılar, belge kaldırıldığında bunları otomatik olarak serbest bırakır; ancak, en iyi performans ve bellek kullanımı için, bunları açıkça kaldırabileceğiniz güvenli zamanlar varsa, bunu yapmalısınız.

Kaynak: MDN

Aşağıdaki kodu kullanarak indirmek için düğmeye tıklamanız yeterlidir.

html olarak

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

Denetleyicide

$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();
		};

Bunu dene

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

ve bu siteyi ziyaret edin, sizin için yararlı olabilir :)

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

Bu, başka bir tarayıcı penceresi açmaya gerek kalmadan javascript ile yapılabilir.

window.location.assign('url');

"Url" yi dosyanızın bağlantısıyla değiştirin. Bunu bir işleve koyabilir ng-clickve indirmeyi bir düğmeden tetiklemeniz gerekiyorsa ile çağırabilirsiniz.

İşteki mevcut projemizde görünmez bir iFrame'imiz vardı ve bir indirme iletişim kutusu almak için dosyanın URL'sini iFrame'e beslemek zorunda kaldım. Düğmeye tıklandığında, denetleyici dinamik url'yi oluşturur ve directiveyazdığım bir özelin listelendiği bir $ kapsam olayını tetikler . Yönerge, halihazırda mevcut değilse gövdeye bir iFrame ekleyecek ve url özniteliğini onun üzerinde ayarlayacaktır.

DÜZENLEME: Bir yönerge ekleme

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

Bu yönerge adı verilen bir denetleyici olayına yanıt verir downloadFile

yani kontrol cihazında yaparsın

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

Kullanıcının indirmesine izin vermek istediğiniz verileri içeren location.hrefbir veri URI'si ayarlayabilirsiniz . Bunun yanı sıra, bunu sadece JavaScript ile yapmanın bir yolu olduğunu düşünmüyorum.

Dosyayı güvenli olmadığı için indirememesi durumunda eklemek ister misiniz: blob: null ... indirme düğmesinin üzerine geldiğinizde, onu dezenfekte etmeniz gerekir. Örneğin,

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

app.config (function ($ compileProvider) {

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

Sunucuya erişiminiz varsa, başlıkları bu daha genel soruda yanıtlandığı gibi ayarlamayı düşünün .

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

Bu cevaba ilişkin yorumları okurken, sekizli akıştan daha özel bir İçerik Türü kullanmanız önerilir.

Aynı problemi yaşadım ve farklı çözümler bulmak için saatler harcadım ve şimdi bu yazıdaki tüm yorumlara katılıyorum, umarım, yardımcı olur, cevabım Internet Explorer 11, Chrome ve FireFox üzerinde doğru bir şekilde test edildi.

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>

YÖNERGE:

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

        }
    }
})

DENETLEYİCİDE:

$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=[];
                                });
                            }; 

SERVİSTE:

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 (SPRING tarihinde):

@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;
}

Bu benim için açısal olarak çalıştı:

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

Statik URL istemedim. Tüm ajax işlemlerini yapmak için AjaxFactory'ye sahibim. Fabrikadan url alıyorum ve aşağıdaki gibi bağlıyorum.

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

Teşekkürler @AhlemMustapha