Bagaimana Anda melayani file untuk diunduh dengan AngularJS atau Javascript?

Saya memiliki beberapa teks di textarea tersembunyi. Ketika sebuah tombol diklik, saya ingin teks tersebut ditawarkan untuk diunduh sebagai .txtfile. Apakah ini mungkin menggunakan AngularJS atau Javascript?

Anda dapat melakukan hal seperti ini dengan menggunakan Blob.

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

di pengontrol Anda:

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

untuk mengaktifkan URL:

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

Harap dicatat bahwa

Setiap kali Anda memanggil createObjectURL (), URL objek baru dibuat, meskipun Anda sudah membuatnya untuk objek yang sama. Masing-masing harus dilepaskan dengan memanggil URL.revokeObjectURL () saat Anda tidak lagi membutuhkannya. Browser akan merilisnya secara otomatis saat dokumen dibongkar; namun, untuk kinerja dan penggunaan memori yang optimal, jika ada waktu aman saat Anda dapat membongkarnya secara eksplisit, Anda harus melakukannya.

Sumber: MDN

Cukup klik tombol untuk mengunduh menggunakan kode berikut.

dalam html

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

Dalam pengontrol

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

Coba ini

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

dan kunjungi situs ini, ini bisa membantu Anda :)

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

Ini dapat dilakukan dalam javascript tanpa perlu membuka jendela browser lain.

window.location.assign('url');

Ganti 'url' dengan tautan ke file Anda. Anda dapat menempatkan ini dalam sebuah fungsi dan memanggilnya dengan ng-clickjika Anda perlu memicu unduhan dari sebuah tombol.

Dalam proyek kami saat ini di tempat kerja kami memiliki iFrame yang tidak terlihat dan saya harus memberi makan url untuk file tersebut ke iFrame untuk mendapatkan kotak dialog unduhan. Pada klik tombol, pengontrol menghasilkan url dinamis dan memicu peristiwa $ scope di mana kebiasaan yang directivesaya tulis, terdaftar. Direktif akan menambahkan iFrame ke badan jika belum ada dan menyetel atribut url di atasnya.

EDIT: Menambahkan perintah

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

Direktif ini menanggapi peristiwa pengontrol yang disebut downloadFile

jadi di pengontrol Anda, Anda melakukannya

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

Anda dapat menyetel location.hrefke URI data yang berisi data yang Anda inginkan agar dapat diunduh pengguna. Selain itu, menurut saya tidak ada cara untuk melakukannya hanya dengan JavaScript.

Hanya ingin menambahkannya jika tidak mengunduh file karena tidak aman: blob: null ... saat Anda mengarahkan kursor ke tombol unduh, Anda harus membersihkannya. Misalnya,

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

app.config (function ($ compileProvider) {

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

Jika Anda memiliki akses ke di server, pertimbangkan untuk menyetel header seperti yang dijawab dalam pertanyaan yang lebih umum ini .

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

Membaca komentar tentang jawaban itu, disarankan untuk menggunakan Jenis Konten yang lebih spesifik daripada aliran oktet.

Saya memiliki masalah yang sama dan menghabiskan berjam-jam menemukan solusi yang berbeda, dan sekarang saya bergabung dengan semua komentar di posting ini. Saya harap ini, akan membantu, jawaban saya telah diuji dengan benar di Internet Explorer 11, Chrome dan FireFox.

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>

PENGARAHAN :

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

        }
    }
})

DI CONTROLLER:

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

DALAM PELAYANAN:

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

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

Ini bekerja untuk saya dalam sudut:

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

Saya tidak ingin Static Url. Saya memiliki AjaxFactory untuk melakukan semua operasi ajax. Saya mendapatkan url dari pabrik dan mengikatnya sebagai berikut.

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

Terima kasih @AhlemMustapha