অ্যাংুলারজেএস বা জাভাস্ক্রিপ্ট দিয়ে ডাউনলোডের জন্য আপনি কীভাবে কোনও ফাইল পরিবেশন করবেন?

Question 1

আমার একটি লুকানো টেক্সারিয়ায় কিছু লেখা রয়েছে। যখন একটি বোতাম ক্লিক করা হয় আমি .txtফাইল হিসাবে ডাউনলোডের জন্য অফার করা পাঠ্য চাই । অ্যাঙ্গুলারজেএস বা জাভাস্ক্রিপ্ট ব্যবহার করে এটি কি সম্ভব?

Question 2

আপনি ব্যবহার করে এরকম কিছু করতে পারেন Blob।

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

আপনার নিয়ামক মধ্যে:

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

ইউআরএল সক্ষম করার জন্য:

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

দয়া করে মনে রাখবেন

আপনি যখনই createObjectURL () কে কল করবেন তখনই আপনি একই বস্তুর জন্য ইতিমধ্যে একটি তৈরি করে থাকলেও একটি নতুন অবজেক্ট URL তৈরি করা হবে। এইগুলির প্রত্যেকটি অবশ্যই URL.revokeObjectURL () এ কল করে মুক্তি দিতে হবে যখন আপনার আর প্রয়োজন নেই। দস্তাবেজটি লোড হওয়ার পরে ব্রাউজারগুলি এগুলি স্বয়ংক্রিয়ভাবে প্রকাশ করবে; তবে, সর্বোত্তম পারফরম্যান্স এবং মেমরির ব্যবহারের জন্য, যদি এমন নিরাপদ সময় থাকে যখন আপনি সেগুলি স্পষ্টভাবে আনলোড করতে পারেন, আপনার এটি করা উচিত।

সূত্র: এমডিএন

Question 3

নিম্নলিখিত কোড ব্যবহার করে ডাউনলোড করতে কেবল বোতামটি ক্লিক করুন।

এইচটিএমএলে

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

স্নিপেট প্রসারিত করুন

নিয়ামক মধ্যে

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

স্নিপেট প্রসারিত করুন

Question 4

এটা চেষ্টা কর

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

এবং এই সাইটটি দেখুন এটি আপনার জন্য সহায়ক হতে পারে :)

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

Question 5

এটি অন্য ব্রাউজার উইন্ডোটি খোলার প্রয়োজন ছাড়াই জাভাস্ক্রিপ্টে করা যেতে পারে।

window.location.assign('url');

আপনার ফাইলের লিঙ্কের সাথে 'url' প্রতিস্থাপন করুন। আপনি এটি কোনও ফাংশনে রাখতে ng-clickপারেন এবং যদি আপনাকে কোনও বোতাম থেকে ডাউনলোডটি ট্রিগার করতে হয় তবে এটিকে কল করতে পারেন।

Question 6

কর্মস্থলে আমাদের বর্তমান প্রকল্পে আমাদের একটি অদৃশ্য আইফ্রেম ছিল এবং একটি ডাউনলোড ডায়ালগ বক্স পেতে ফাইলের url আমি আইফ্রেমে ফিড করতে হয়েছিল। বোতাম ক্লিকের উপর, নিয়ামকটি গতিশীল url উত্পন্ন করে এবং একটি কাস্টোপ ইভেন্টটি ট্রিগার করে যেখানে directiveআমি কাস্টম লিখেছি, তালিকাভুক্ত করছে। এই নির্দেশটি দেহটিতে একটি আইফ্রেম যুক্ত করবে যদি এটি ইতিমধ্যে বিদ্যমান না থাকে এবং এতে ইউআরএল বৈশিষ্ট্য সেট করে।

সম্পাদনা: একটি নির্দেশিকা যুক্ত করা

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

এই নির্দেশকে ডাকা একটি নিয়ন্ত্রণকারী ইভেন্টে সাড়া দেয় downloadFile

সুতরাং আপনার নিয়ামক আপনি করতে

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

Question 7

আপনি সেট করতে পারেন location.hrefএকটি থেকে তথ্য কোনো URI ডেটা যাক ব্যবহারকারী ডাউনলোড চান রয়েছে। এগুলি ছাড়া, আমি কেবল জাভাস্ক্রিপ্ট দিয়ে এটি করার কোনও উপায় নেই বলে আমি মনে করি না।

Question 8

অনিরাপদ: ব্লব: নাল ... কারণ ফাইলটি ডাউনলোড না করা হলে আপনি কেবল এটি যুক্ত করতে চান যখন আপনি ডাউনলোড বোতামের উপরে ঘুরে দেখেন, আপনাকে এটি স্যানিটাইজ করতে হবে। এই ক্ষেত্রে,

var অ্যাপ্লিকেশন = কৌণিক.মডিউল ('অ্যাপ', []);

app.config (ফাংশন (ile সংকলন সরবরাহকারী) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);

Question 9

আপনার যদি সার্ভারে অ্যাক্সেস থাকে তবে এই আরও সাধারণ প্রশ্নের উত্তর হিসাবে শিরোনামগুলি সেট করা বিবেচনা করুন ।

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

এই উত্তরে মন্তব্যগুলি পড়া, অষ্টেট-স্ট্রিমের চেয়ে বেশি নির্দিষ্ট কন্টেন্ট-টাইপ ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

Question 10

আমার একই সমস্যা ছিল এবং আমি বহু ঘন্টা বিচ্ছিন্ন সমাধানগুলি সন্ধান করতে ব্যয় করেছি এবং এখন আমি এই পোস্টে সমস্ত মন্তব্যে যোগদান করি I আমি আশা করি এটি সহায়ক হবে, আমার উত্তরটি সঠিকভাবে ইন্টারনেট এক্সপ্লোরার ১১, ক্রোম এবং ফায়ারফক্সে পরীক্ষা করা হয়েছিল।

এইচটিএমএল:

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

প্রত্যক্ষ:

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

        }
    }
})

নিয়ন্ত্রণকারী:

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

সেবা:

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

ব্যাকেন্ড (স্প্রিংয়ে):

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

Question 11

এটি আমার পক্ষে কৌণিকভাবে কাজ করেছে:

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

Question 12

আমি স্ট্যাটিক ইউরাল চাইনি। সমস্ত এজাক্স অপারেশন করার জন্য আমার কাছে অ্যাজাক্স ফ্যাক্টরি রয়েছে। আমি কারখানার থেকে url পাচ্ছি এবং নীচে এটি আবদ্ধ করছি।

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

ধন্যবাদ @ আহলেম মুস্তফা