এজ্যাক্স পোস্ট থেকে ফাইল ডাউনলোড করুন le


392

আমার কাছে একটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন রয়েছে যা একটি নির্দিষ্ট ইউআরএলে এজাক্স পোস্টের অনুরোধগুলি প্রেরণ করে। প্রতিক্রিয়া একটি JSON স্ট্রিং হতে পারে বা এটি কোনও ফাইল (সংযুক্তি হিসাবে) হতে পারে। আমি আমার এজ্যাক্স কলটিতে সামগ্রী-প্রকার এবং সামগ্রী-স্বভাব সহজেই সনাক্ত করতে পারি, তবে একবার আমি সনাক্ত করে ফেললাম যে প্রতিক্রিয়াতে কোনও ফাইল রয়েছে, আমি ক্লায়েন্টটিকে এটি ডাউনলোড করার জন্য কীভাবে প্রস্তাব দেব? আমি এখানে বেশ কয়েকটি অনুরূপ থ্রেড পড়েছি তবে এর মধ্যে কোনও উত্তরই আমি খুঁজে পাই না provide

দয়া করে, দয়া করে উত্তরগুলি পোস্ট করবেন না যাতে আমি এর জন্য এজ্যাক্স ব্যবহার করা উচিত নয় বা আমার ব্রাউজারটি পুনঃনির্দেশ করা উচিত, কারণ এর কোনওটিই বিকল্প নয়। সরল এইচটিএমএল ফর্ম ব্যবহার করাও কোনও বিকল্প নয়। আমার যা দরকার তা হ'ল ক্লায়েন্টকে ডাউনলোড ডায়ালগ প্রদর্শন করা। এটি করা যায় এবং কীভাবে?


যারা এই নিবন্ধটি পড়েন তাদের জন্য এই পোস্টটি পড়ুন: stackoverflow.com/questions/20830309/…
sobhan

আমি আপনার সমাধানটি প্রশ্ন থেকে সরিয়েছি। নীচে উত্তর পোস্ট হিসাবে এটি পোস্ট করতে আপনাকে স্বাগত জানানো হয়, তবে এটি প্রশ্ন পোস্টে অন্তর্ভুক্ত নয়।
মার্টিজন পিটারস

উত্তর:


111

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

আপনি সামগ্রীর ধরণের অ্যাপ্লিকেশন / ডাউনলোড চান - আপনি যে কোনও ভাষা ব্যবহার করছেন তার জন্য কীভাবে ডাউনলোড সরবরাহ করতে হবে তা সন্ধান করুন।


35
প্রশ্নে বর্ণিত হিসাবে: "একটি সরল এইচটিএমএল ফর্ম ব্যবহার করাও কোনও বিকল্প নয়" "
পাভলে প্রেডিক

13
না, কারণ একটি নিয়মিত POST ব্যবহার করা ব্রাউজারটিকে পোষ্ট URL- তে নেভিগেট করবে। আমি পৃষ্ঠাটি থেকে দূরে নেভিগেট করতে চাই না। আমি পটভূমিতে অনুরোধটি সম্পাদন করতে চাই, প্রতিক্রিয়াটি প্রসেস করব এবং ক্লায়েন্টের কাছে উপস্থাপন করব।
পাভলে প্রেডিক

6
সার্ভার যদি অন্য উত্তরের মতো শিরোনামগুলি ফেরত পাঠায় তবে এটি একটি নতুন উইন্ডোতে খোলে - আমি এটি আগে করেছি। এটি কেবল তখনই নেভিগেট করবে যদি আপনার সার্ভার-সাইড স্ক্রিপ্টটি HTML কোড ফেরত দেয়

1
@ পাভেলপ্রেডিক আপনি কীভাবে উভয় প্রতিক্রিয়া পরিস্থিতি পরিচালনা করতে পারবেন তা বুঝতে পেরেছেন, যেমন জেএসওএন পাঠ্য প্রতিক্রিয়া বা ফাইল প্রতিক্রিয়া ডাউনলোড করবেন?
ওয়েব ব্যবহারকারী

9
উত্তর পরিষ্কার নয় এবং প্রস্তাবিত সমাধানটি কাজ করে না।
stack247

530

এত তাড়াতাড়ি হাল ছাড়বেন না, কারণ এটি ফাইলএপিআইয়ের কিছু অংশ ব্যবহার করে (আধুনিক ব্রাউজারগুলিতে) করা যেতে পারে:

var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
    if (this.status === 200) {
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }
        var type = xhr.getResponseHeader('Content-Type');

        var blob;
        if (typeof File === 'function') {
            try {
                blob = new File([this.response], filename, { type: type });
            } catch (e) { /* Edge */ }
        }
        if (typeof blob === 'undefined') {
            blob = new Blob([this.response], { type: type });
        }

        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);

            if (filename) {
                // use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");
                // safari doesn't support this yet
                if (typeof a.download === 'undefined') {
                    window.location.href = downloadUrl;
                } else {
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
            } else {
                window.location.href = downloadUrl;
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    }
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params));

এখানে jQuery.ajax ব্যবহার করে পুরানো সংস্করণ। প্রতিক্রিয়াটি কিছু চরসেটের স্ট্রিংয়ে রূপান্তরিত হলে এটি বাইনারি ডেটা মঙ্গলে ফেলতে পারে।

$.ajax({
    type: "POST",
    url: url,
    data: params,
    success: function(response, status, xhr) {
        // check for a filename
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        var type = xhr.getResponseHeader('Content-Type');
        var blob = new Blob([response], { type: type });

        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);

            if (filename) {
                // use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");
                // safari doesn't support this yet
                if (typeof a.download === 'undefined') {
                    window.location.href = downloadUrl;
                } else {
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
            } else {
                window.location.href = downloadUrl;
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    }
});

1
অনেক ধন্যবাদ ! যদিও এটি ব্যবহার করার জন্য আমার এইচটিটিপি প্রতিক্রিয়ায় আমাকে 'অ্যাক্সেস-কন্ট্রোল-এক্সপোজ-হেডারস' এবং 'অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-শিরোনাম' দুটিতে 'সামগ্রী-স্বভাব' যুক্ত করতে হয়েছিল।
জুলিয়েনড

1
ফাইলটি 500 এমবি এর চেয়ে বড় হলে এটি কাজ করে না, সম্ভবত আমাদের অন্য একটি এপিআই ব্যবহার করা উচিত?
হিরা

ক্লিনআপ অংশে (এবং কেবল ইউআরএল নয়) ডিওএম থেকে কোনও উপাদান সরিয়ে দেওয়ার বিষয়ে কী? document.body.removeChild(a);
স্কোরগ্রাফিক

@ হিররা "অ্যারেবুফার" এর পরিবর্তে প্রতিক্রিয়া টাইপ "ব্লব" ব্যবহার করুন এবং সেইভাবে ওনলোড কলব্যাক ফাংশনটি পুনরায় লিখুন, যে ব্লাবটি হ'ল এটি respগ্রহী (ভের ব্লাব = এটি.অগ্রহ;) তাইvar blob =this.responce; /** if (typeof File === 'function') { try { blob = new File([this.response], filename, { type: type }); } catch (e) { /* Edge */ } } if (typeof blob === 'undefined') { blob = new Blob([this.response], { type: type }); } */
ক্রিস

1
এটি নিখুঁত সমাধান। শুধু একটি ছোট পরিবর্তন। টাইপস্ক্রিপ্টে আমার window.location.href = downloadUrlপরিবর্তে দরকার ছিলwindow.location = downloadUrl
michal.jakubeczy

39

আমি একই সমস্যার মুখোমুখি হয়েছি এবং এটি সফলভাবে সমাধান করেছি। আমার ব্যবহারের ক্ষেত্রে এটি হয়।

" সার্ভারে JSON ডেটা পোস্ট করুন এবং একটি এক্সেল ফাইল পান। সেই এক্সেল ফাইলটি সার্ভার দ্বারা তৈরি করা হয়েছিল এবং ক্লায়েন্টের প্রতিক্রিয়া হিসাবে ফিরে আসে returned ব্রাউজারে কাস্টম নামের ফাইল হিসাবে সেই প্রতিক্রিয়াটি ডাউনলোড করুন "

$("#my-button").on("click", function(){

// Data to post
data = {
    ids: [1, 2, 3, 4, 5]
};

// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    var a;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        // Trick for making downloadable link
        a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhttp.response);
        // Give filename you wish to download
        a.download = "test-file.xls";
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
    }
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});

উপরের স্নিপেটটি কেবল নিম্নলিখিতটি করছে

  • XMLHttpRequest ব্যবহার করে সার্ভারে JSON হিসাবে একটি অ্যারে পোস্ট করা।
  • ব্লব (বাইনারি) হিসাবে সামগ্রী আনার পরে, আমরা একটি ডাউনলোডযোগ্য ইউআরএল তৈরি করছি এবং এটিকে "অ" লিঙ্কে সংযুক্ত করছি তারপরে এটি ক্লিক করুন।

এখানে আমাদের সাবধানে কয়েকটি জিনিস সার্ভারের দিকে সেট করা দরকার। পাইথন জ্যাঙ্গো এইচটিটিপ্রেসপোনসে আমি কয়েকটি শিরোনাম সেট করেছি। আপনি যদি অন্যান্য প্রোগ্রামিং ভাষা ব্যবহার করেন তবে সেগুলি আপনাকে সে অনুযায়ী সেট করতে হবে।

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

যেহেতু আমি এখানে এক্সএলএস (এক্সেল) ডাউনলোড করেছি তাই আমি কনটেন্ট টাইপকে উপরের একটিতে সামঞ্জস্য করেছি। আপনার ফাইল টাইপ অনুযায়ী আপনাকে এটি সেট করতে হবে। যে কোনও ধরণের ফাইল ডাউনলোড করতে আপনি এই কৌশলটি ব্যবহার করতে পারেন।


33

আপনি কোন সার্ভার-সাইডের ভাষা ব্যবহার করছেন? আমার অ্যাপ্লিকেশনটিতে আমি পিএইচপি এর প্রতিক্রিয়ায় সঠিক শিরোনাম সেট করে খুব সহজেই একটি এজেএক্স কল থেকে একটি ফাইল ডাউনলোড করতে পারি:

হেডার সার্ভার-সাইড সেট করা হচ্ছে

header("HTTP/1.1 200 OK");
header("Pragma: public");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");

// The optional second 'replace' parameter indicates whether the header
// should replace a previous similar header, or add a second header of
// the same type. By default it will replace, but if you pass in FALSE
// as the second argument you can force multiple headers of the same type.
header("Cache-Control: private", false);

header("Content-type: " . $mimeType);

// $strFileName is, of course, the filename of the file being downloaded. 
// This won't have to be the same name as the actual file.
header("Content-Disposition: attachment; filename=\"{$strFileName}\""); 

header("Content-Transfer-Encoding: binary");
header("Content-Length: " . mb_strlen($strFile));

// $strFile is a binary representation of the file that is being downloaded.
echo $strFile;

এটি প্রকৃতপক্ষে এই ডাউনলোড পৃষ্ঠায় ব্রাউজারটিকে 'পুনর্নির্দেশ' করবে, তবে @ অহরেন তার মন্তব্যে যেমন বলেছেন, এটি বর্তমান পৃষ্ঠা থেকে দূরে নেভিগেট করবে না।

এগুলি সবই সঠিক শিরোনাম নির্ধারণের জন্য তাই আমি নিশ্চিত যে আপনি যে সার্ভার-সাইড ভাষা ব্যবহার করছেন সেটি যদি পিএইচপি না হয় তবে আপনি একটি উপযুক্ত সমাধান খুঁজে পাবেন।

প্রতিক্রিয়া ক্লায়েন্ট পক্ষ পরিচালনা

ধরে নিচ্ছি যে আপনি কীভাবে AJAX কল করতে পারবেন তা ক্লায়েন্টের পক্ষ থেকে আপনি সার্ভারে একটি এজেএক্স অনুরোধটি কার্যকর করেন। সার্ভারটি তখন একটি লিঙ্ক তৈরি করে যেখানে এই ফাইলটি ডাউনলোড করা যায়, যেমন 'ফরোয়ার্ড' URL যেখানে আপনি নির্দেশ করতে চান point উদাহরণস্বরূপ, সার্ভার এর সাথে প্রতিক্রিয়া জানায়:

{
    status: 1, // ok
    // unique one-time download token, not required of course
    message: 'http://yourwebsite.com/getdownload/ska08912dsa'
}

প্রতিক্রিয়াটি প্রক্রিয়া করার সময়, আপনি iframeআপনার শরীরে একটি ইনজেকশন দিন এবং iframeসদ্য এটির মতো প্রাপ্ত ইউআরএলটির এসআরসি সেট করে রেখেছেন (উদাহরণটির স্বাচ্ছন্দ্যের জন্য jQuery ব্যবহার করে):

$("body").append("<iframe src='" + data.message +
  "' style='display: none;' ></iframe>");

আপনি যদি উপরে বর্ণিত হিসাবে সঠিক শিরোনামগুলি সেট করে থাকেন তবে, iframe বর্তমান পৃষ্ঠা থেকে ব্রাউজারটিকে সরিয়ে না রেখে ডাউনলোড ডায়লগকে বাধ্য করবে।

বিঃদ্রঃ

আপনার প্রশ্নের সাথে অতিরিক্ত সংযোজন; আমি মনে করি এজেএক্স প্রযুক্তির সাথে স্টাফের অনুরোধ করার সময় সর্বদা জেএসএনকে ফিরিয়ে দেওয়া ভাল। আপনি জেএসওএন প্রতিক্রিয়া পাওয়ার পরে, তারপরে কী করবেন তা ক্লায়েন্টের পক্ষে সিদ্ধান্ত নিতে পারেন। হতে পারে, উদাহরণস্বরূপ, পরে আপনি ব্যবহারকারীকে ডাউনলোড ডাউনলোডের জন্য সরাসরি ডাউনলোডের পরিবর্তে ইউআরএলটিতে একটি ডাউনলোড লিঙ্কে ক্লিক করতে চান, আপনার বর্তমান সেটআপে আপনাকে ক্লায়েন্ট এবং সার্ভার-সাইড উভয়ই এটি আপডেট করতে হবে।


24

কৌনিক দৃষ্টিকোণ থেকে সমাধান খুঁজছেন তাদের জন্য, এটি আমার পক্ষে কাজ করেছে:

$http.post(
  'url',
  {},
  {responseType: 'arraybuffer'}
).then(function (response) {
  var headers = response.headers();
  var blob = new Blob([response.data],{type:headers['content-type']});
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = "Filename";
  link.click();
});

এটি সাহায্য করেছে, তবে আমার আসল ফাইল নামটি সংরক্ষণ করা দরকার। আমি "কনটেন্ট-ডিসপজিশন" এর অধীনে প্রতিক্রিয়া শিরোনামে ফাইলের নামটি দেখতে পাচ্ছি, কিন্তু কোডটিতে প্রতিক্রিয়া অবজেক্টে আমি সেই মানটি পাই না। link.download = ""একটি এলোমেলো গাইড ফাইল নাম ফলাফল নির্ধারণ , এবং link.download = null"নাল" নামের একটি ফাইলের ফলাফল।
মেরি

@ মেরি, আপনি INPUTউপাদানটির HTMLInputElement.filesসম্পত্তি ব্যবহার করে আপলোড করার সময় ফাইলের নামটি রেকর্ড করতে পারেন । আরও বিশদের জন্য ফাইল ইনপুটটিতে MDN ডক্স দেখুন।
টিম হিটলার

ব্লব আকার সীমিত হয়: stackoverflow.com/questions/28307789/...
user0800

22

এই কাজটি https://stackoverflow.com/a/27563953/2845977 এ কীভাবে পেয়েছি তা এখানে

$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob=new Blob([data]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="<FILENAME_TO_SAVE_WITH_EXTENSION>";
    link.click();
  }
});

আপডেট করা হয়েছে উত্তর ব্যবহার download.js

$.ajax({
  url: '<URL_TO_FILE>',
  success: download.bind(true, "<FILENAME_TO_SAVE_WITH_EXTENSION>", "<FILE_MIME_TYPE>")
});


এর জন্য আপনাকে ধন্যবাদ, আমি আজ এটি ব্যবহার করেছি। কল্পনাপ্রসূত
রায়ান উইলসন

হাই, এই কাজ করার জন্য আমার কি jQuery 3.0> থাকা দরকার?
gbade_

আপনার দেওয়া দুটি উদাহরণের সাথে আমি একটি ফাঁকা পিডিএফ পাচ্ছি। আমি এটি একটি পিডিএফ ফাইল ডাউনলোড করার চেষ্টা করছি am
gbade_

@gbade_ না, আপনার কোনও নির্দিষ্ট jQuery সংস্করণ দরকার নেই। সমস্ত সংস্করণ সঙ্গে সূক্ষ্ম কাজ করা উচিত। আপনি যে পিডিএফটি ডাউনলোড করছেন তাতে সঠিক সিওআরএস শিরোনাম রয়েছে কিনা তা পরীক্ষা করে দেখেছেন? কনসোলে কোনও ত্রুটি ডিবাগ করতে সহায়তা করতে পারে
ময়ূর পদশালা

এটি আমার জন্য ডাউনলোড. success: function (response, status, request) { download(response, "filename.txt", "application/text"); }
js

12

আমি দেখতে পেয়েছি আপনি ইতিমধ্যে একটি সমাধান খুঁজে পেয়েছেন, তবে আমি কেবল এমন কিছু তথ্য যুক্ত করতে চেয়েছিলাম যা বড় পোস্টের অনুরোধের সাথে একই জিনিস অর্জন করতে চাইলে কেউ সহায়তা করতে পারে।

কয়েক সপ্তাহ আগে আমার একই সমস্যা ছিল, সত্যই এটিএএএএক্সএক্সের মাধ্যমে "ক্লিন" ডাউনলোড করা সম্ভব নয়, ফিলামেন্ট গ্রুপ একটি jQuery প্লাগইন তৈরি করেছে যা আপনি ইতিমধ্যে খুঁজে পেয়েছেন ঠিক এমনভাবে কাজ করে, এটিকে jQuery ফাইল বলা হয় ডাউনলোড করুন তবে এই কৌশলটির একটি খারাপ দিক রয়েছে।

আপনি যদি এজেএক্সের মাধ্যমে বড় অনুরোধগুলি প্রেরণ করছেন (ফাইলগুলি +1 এমবি বলুন) এটি প্রতিক্রিয়াশীলতার উপর নেতিবাচক প্রভাব ফেলবে। ধীরে ধীরে ইন্টারনেট সংযোগে আপনাকে অনেক অপেক্ষা করতে হবে অনুরোধটি না পাওয়া পর্যন্ত এবং ফাইলটি ডাউনলোডের জন্য অপেক্ষা করতে হবে। এটি তাত্ক্ষণিকভাবে "ক্লিক" => "পপআপ" => "ডাউনলোড শুরু" এর মতো নয়। এটি আরও বেশি "ক্লিক করুন" => "ডেটা প্রেরণ না হওয়া পর্যন্ত অপেক্ষা করুন" => "প্রতিক্রিয়া অপেক্ষা করুন" => "ডাউনলোড শুরু" যা এটি ফাইলের আকার দ্বিগুণ প্রদর্শিত করে কারণ আপনাকে অনুরোধটি প্রেরণের জন্য অপেক্ষা করতে হবে এজেএক্সের মাধ্যমে এবং এটি ডাউনলোডযোগ্য ফাইল হিসাবে ফিরে পান।

আপনি যদি ছোট ফাইল আকারের সাথে কাজ করছেন <1 এমবি আপনি এটি লক্ষ্য করবেন না। তবে আমি নিজের অ্যাপটিতে যেমন আবিষ্কার করেছি, বড় আকারের ফাইলের আকার এটি প্রায় অসহনীয়।

আমার অ্যাপ্লিকেশনটি ব্যবহারকারীদের গতিশীলভাবে উত্পন্ন চিত্রগুলি রফতানি করার অনুমতি দেয়, এই চিত্রগুলি POST অনুরোধের মাধ্যমে বেস 64 নম্বরে সার্ভারে প্রেরণ করা হয় (এটি একমাত্র সম্ভাব্য উপায়), তারপরে প্রক্রিয়াজাতকরণ এবং .png, .jpg ফাইল, বেস 64 আকারে ব্যবহারকারীদের কাছে প্রেরণ করা হয় চিত্রগুলির জন্য স্ট্রিং +1 এমবি বিশাল, এই ফাইল ডাউনলোড শুরু করার জন্য ব্যবহারকারীরা প্রয়োজনের চেয়ে বেশি অপেক্ষা করতে বাধ্য করে। ধীর ইন্টারনেট সংযোগে এটি সত্যিই বিরক্তিকর হতে পারে।

এর জন্য আমার সমাধানটি হ'ল সার্ভারে অস্থায়ীভাবে ফাইল লেখা, এটি প্রস্তুত হয়ে যাওয়ার পরে, একটি বোতামের আকারে গতিরূপে ফাইলটির একটি লিঙ্ক তৈরি করা হয়েছিল যা "অনুগ্রহ করে অপেক্ষা করুন ..." এবং "ডাউনলোড" এর মধ্যে এবং একই সাথে পরিবর্তিত হয় সময়, একটি পূর্বরূপ পপআপ উইন্ডোতে বেস 64 চিত্রটি মুদ্রণ করুন যাতে ব্যবহারকারীরা "ডান ক্লিক" করতে এবং এটি সংরক্ষণ করতে পারেন। এটি ব্যবহারকারীর জন্য সমস্ত অপেক্ষার সময়কে আরও সহনীয় করে তোলে এবং জিনিসগুলিকে গতি বাড়িয়ে তোলে।

30 সেপ্টেম্বর, 2014 আপডেট করুন:

কয়েক মাস পেরিয়ে গেছে যখন আমি এটি পোস্ট করেছি, অবশেষে আমি বড় বেস 64 স্ট্রিংয়ের সাথে কাজ করার সময় জিনিসগুলি গতি বাড়ানোর জন্য আরও ভাল পদ্ধতির সন্ধান করেছি। আমি এখন ডাটাবেসে বেস64 স্ট্রিংগুলি সংরক্ষণ করি (লম্বটেক্সট বা লংব্লগ ক্ষেত্রগুলি ব্যবহার করে), তারপরে আমি jQuery ফাইল ডাউনলোডের মাধ্যমে এর রেকর্ড আইডিটি পাস করি, শেষ পর্যন্ত ডাউনলোড স্ক্রিপ্ট ফাইলটিতে আমি বেস আইডিটি ব্যবহার করে ডাটাবেসটি জিজ্ঞাসা করি বেস 64৪ স্ট্রিংটি টানতে এবং এটি পাস করার জন্য ডাউনলোড ফাংশন।

স্ক্রিপ্ট উদাহরণ ডাউনলোড করুন:

<?php
// Record ID
$downloadID = (int)$_POST['id'];
// Query Data (this example uses CodeIgniter)
$data       = $CI->MyQueries->GetDownload( $downloadID );
// base64 tags are replaced by [removed], so we strip them out
$base64     = base64_decode( preg_replace('#\[removed\]#', '', $data[0]->image) );
// This example is for base64 images
$imgsize    = getimagesize( $base64 );
// Set content headers
header('Content-Disposition: attachment; filename="my-file.png"');
header('Content-type: '.$imgsize['mime']);
// Force download
echo $base64;
?>

আমি জানি যে এটি ওপি যা চেয়েছিল তার বাইরে, তবে আমি অনুভব করেছি যে আমার উত্তরগুলি আমার অনুসন্ধানের সাথে আপডেট করা ভাল। যখন আমি আমার সমস্যার সমাধান অনুসন্ধান করছিলাম, আমি প্রচুর "এজ্যাক্স পোস্টের ডেটা থেকে ডাউনলোড করুন" থ্রেডগুলি পড়েছিলাম যা আমার সন্ধানের উত্তরটি দেয় নি, আমি আশা করি যে এই তথ্যটি এমন কিছু অর্জন করতে খুঁজছেন এমন কাউকে সহায়তা করে।


jQuery File Downloadশুধুমাত্র আমার URL- এ পুনর্নির্দেশ। আমি এটা ভালো আহবান jQuery.download("api/ide/download-this-file.php", {filePath: path2Down}, "POST");
ক্যাস্পার

5

আমি গ্রহণযোগ্য উত্তরে প্রযুক্তিটি ব্যবহার করার সময় উত্থাপিত কিছু অসুবিধাগুলি তুলে ধরতে চাই, যেমন একটি ফর্ম পোস্ট ব্যবহার করে:

  1. আপনি অনুরোধে শিরোনাম সেট করতে পারবেন না। যদি আপনার প্রমাণীকরণের স্কিমাটিতে শিরোনামগুলি জড়িত থাকে, একটি জসন-ওয়েব-টোকেন অনুমোদনের শিরোনামে পাস করেছে, আপনাকে এটি পাঠানোর জন্য অন্য উপায় খুঁজে বের করতে হবে, উদাহরণস্বরূপ ক্যোয়ারী প্যারামিটার হিসাবে।

  2. অনুরোধটি শেষ হয়ে গেলে আপনি সত্যিই বলতে পারবেন না। ঠিক আছে, আপনি একটি কুকি ব্যবহার করতে পারেন যা প্রতিক্রিয়ার জন্য সেট হয়ে গেছে, যেমন jquery.fileDownload দ্বারা সম্পন্ন হয়েছে , তবে এটি একেবারে সঠিক। এটি সমবর্তী অনুরোধগুলির জন্য কাজ করবে না এবং যদি কোনও প্রতিক্রিয়া কখনও না আসে তবে এটি ভেঙে যাবে।

  3. সার্ভার যদি কোনও ত্রুটির সাথে প্রতিক্রিয়া জানায় তবে ব্যবহারকারীকে ত্রুটি পৃষ্ঠায় পুনর্নির্দেশ করা হবে।

  4. আপনি কেবল কোনও ফর্ম দ্বারা সমর্থিত সামগ্রীর ধরণগুলি ব্যবহার করতে পারেন । যার অর্থ আপনি JSON ব্যবহার করতে পারবেন না।

আমি এস 3 এ ফাইলটি সংরক্ষণ করার পদ্ধতিটি ব্যবহার করে ফাইলটি পেতে একটি প্রাক-স্বাক্ষরিত ইউআরএল প্রেরণ করে শেষ করেছি।


5

যারা আরও আধুনিক পদ্ধতির সন্ধান করছেন তাদের জন্য আপনি এটি ব্যবহার করতে পারেন fetch API। নীচের উদাহরণে স্প্রেডশিট ফাইলটি কীভাবে ডাউনলোড করবেন তা দেখানো হয়েছে। এটি নিম্নলিখিত কোড সহ সহজেই সম্পন্ন হয়।

fetch(url, {
    body: JSON.stringify(data),
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
})
.then(response => response.blob())
.then(response => {
    const blob = new Blob([response], {type: 'application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = downloadUrl;
    a.download = "file.xlsx";
    document.body.appendChild(a);
    a.click();
})

আমি বিশ্বাস করি যে এই XMLHttpRequestসমাধানটি অন্যান্য সমাধানের চেয়ে বোঝা সহজ । এছাড়াও, এটির সাথে jQueryবাড়তি কোনও লাইব্রেরি যুক্ত করার প্রয়োজন ছাড়াই এই পদ্ধতির অনুরূপ বাক্য গঠন রয়েছে ।

অবশ্যই, আপনি কোন ব্রাউজারটি বিকাশ করছেন তা যাচাই করার পরামর্শ দেব, যেহেতু এই নতুন পদ্ধতির আইই তে কাজ করবে না। আপনি নীচের [লিঙ্ক] [১] এ সম্পূর্ণ ব্রাউজারের সামঞ্জস্যের তালিকাটি পেতে পারেন।

গুরুত্বপূর্ণ : এই উদাহরণে আমি প্রদত্ত একটি শোনার সার্ভারে একটি JSON অনুরোধ পাঠাচ্ছি url। এটি urlঅবশ্যই সেট করা উচিত, আমার উদাহরণে আমি ধরে নিচ্ছি যে আপনি এই অংশটি জানেন। এছাড়াও, আপনার অনুরোধটি কাজ করার জন্য প্রয়োজনীয় শিরোনামগুলি বিবেচনা করুন। যেহেতু আমি একটি JSON- পাঠাচ্ছি, আমি যোগ করা আবশ্যক Content-Typeহেডার এবং এটি সেট application/json; charset=utf-8, যেমন সার্ভারটি অনুরোধটি এটা পাবেন ধরণ জানাতে।


1
অসাধারণ! এটি ডাউনলোড পপআপের পরিবর্তে নতুন ট্যাবে খোলার জন্য: `` `কনট উইন্ডো = খুলুন (ডাউনলোড ইউআরএল," _ব্ল্যাঙ্ক ") ব্যবহার করুন; যদি (উইন্ডো! == নাল) উইন্ডো.ফোকাস (); `` `
অ্যান্ডি

একাধিক সেট ডেটার জন্য আমার এটি করার কোনও উপায় আছে? উদাহরণস্বরূপ, এপিআই কল থেকে {ফাইললাইন: ডেটা, ফাইলটুই: ডেটা, ফাইলট্রি: ডেটা back ফিরে পান এবং একবারে তিনটি ডাউনলোড করা ফাইল জেনারেট করবেন? ধন্যবাদ!
il0v3d0g

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

4

একটি অস্থায়ী লুকানো ফর্ম ব্যবহার করে আমার সমাধান এখানে।

//Create an hidden form
var form = $('<form>', {'method': 'POST', 'action': this.href}).hide();

//Add params
var params = { ...your params... };
$.each(params, function (k, v) {
    form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v}));
});

//Make it part of the document and submit
$('body').append(form);
form.submit();

//Clean up
form.remove();

নোট করুন যে আমি জিকিউরি ব্যাপকভাবে ব্যবহার করি তবে আপনি স্থানীয় জেএসের সাথেও এটি করতে পারেন।


3

অন্যরা যেমন বলেছে, আপনি একটি পোষ্ট অনুরোধের মাধ্যমে ডাউনলোড করতে একটি ফর্ম তৈরি এবং জমা দিতে পারেন। তবে আপনাকে এটি ম্যানুয়ালি করতে হবে না।

এটি করার জন্য সত্যই একটি সাধারণ লাইব্রেরি হ'ল jquery.redirect । এটি স্ট্যান্ডার্ড jQuery.postপদ্ধতির মতো একটি এপিআই সরবরাহ করে :

$.redirect(url, [values, [method, [target]]])

3

এটি একটি 3 বছরের পুরানো প্রশ্ন তবে আমার আজ একই সমস্যা ছিল। আমি আপনার সম্পাদিত সমাধানটি দেখেছি তবে আমি মনে করি এটি পারফরম্যান্সের ত্যাগ করতে পারে কারণ এটির একটি দ্বিগুণ অনুরোধ করতে হবে। সুতরাং যদি কারও যদি অন্য কোনও সমাধানের প্রয়োজন হয় যা পরিষেবাটিতে দুবার কল করতে বোঝায় না তবে আমি এটিই এইভাবে করেছি:

<form id="export-csv-form" method="POST" action="/the/path/to/file">
    <input type="hidden" name="anyValueToPassTheServer" value="">
</form>

এই ফর্মটি কেবলমাত্র পরিষেবাটি কল করতে এবং একটি উইন্ডো.লোকশন () ব্যবহার এড়াতে ব্যবহৃত হয়। এর পরে আপনাকে কেবল পরিষেবাটি কল করতে এবং ফাইলটি পেতে jquery থেকে একটি ফর্ম জমা দিতে হবে। এটি বেশ সহজ তবে আপনি একটি ব্যবহার করে ডাউনলোড করতে পারেন পোষ্ট । আমি এখন যে আপনি যে পরিষেবাটি কল করছেন এটি জিইটি হয়ে থাকলে এটি আরও সহজ হতে পারে তবে এটি আমার ক্ষেত্রে নয়।


1
প্রশ্নটি
এজ্যাক্সটি

এটি উপরের সমস্যার কেবল সমাধান, তবে এজ্যাক্স কলগুলির জন্য নয়।
নমি আলী

1

আমি এই ফাইল সেভার.জেএস ব্যবহার করেছি । সিএসভি ফাইলগুলির ক্ষেত্রে আমার ক্ষেত্রে, আমি এটি করেছি (কফিসক্রিপ্টে):

  $.ajax
    url: "url-to-server"
    data: "data-to-send"
    success: (csvData)->
      blob = new Blob([csvData], { type: 'text/csv' })
      saveAs(blob, "filename.csv")

আমি মনে করি বেশিরভাগ জটিল ক্ষেত্রে ডেটা সঠিকভাবে প্রক্রিয়া করা উচিত। হুডের অধীনে ফাইলসভার.জেজে জনাথন অ্যামেন্ডের উত্তরের একই পদ্ধতির প্রয়োগ করে ।


1
.. তবে আপনি সাধারণত আইওএস এ ফাইল ডাউনলোড করতে পারেন?
অ্যালেক্স মার্শাল

1

দেখুন: http://www.henryalgus.com/reading-binary-files- using-jquery-ajax / এটি প্রতিক্রিয়া হিসাবে একটি ফোঁড়া ফিরে আসবে, যা ফাইলসাইভারে রাখা যেতে পারে


2
যতক্ষণ এই তাত্ত্বিক প্রশ্নের উত্তর হতে পারে, এটা বাঞ্ছনীয় হবে উত্তর অপরিহার্য অংশের এখানে অন্তর্ভুক্ত করা, এবং রেফারেন্স এর জন্য লিঙ্ক প্রদান।
ভার্গব রাও

1

পেতে জনাথন ক্ষতিপূরণ উত্তর এজ কাজ করার আমি নিম্নলিখিত পরিবর্তনগুলি করা:

var blob = typeof File === 'function'
    ? new File([this.response], filename, { type: type })
    : new Blob([this.response], { type: type });

এই

var f = typeof File+"";
var blob = f === 'function' && Modernizr.fileapi
    ? new File([this.response], filename, { type: type })
    : new Blob([this.response], { type: type });

আমি বরং এটি একটি মন্তব্য হিসাবে পোস্ট করতে চাই তবে এর জন্য আমার যথেষ্ট খ্যাতি নেই


0

বিভিন্ন উত্স থেকে সংগৃহীত আমার সমাধানটি এখানে: সার্ভারের পাশ বাস্তবায়ন:

    String contentType = MediaType.APPLICATION_OCTET_STREAM_VALUE;
    // Set headers
    response.setHeader("content-disposition", "attachment; filename =" + fileName);
    response.setContentType(contentType);
    // Copy file to output stream
    ServletOutputStream servletOutputStream = response.getOutputStream();
    try (InputStream inputStream = new FileInputStream(file)) {
        IOUtils.copy(inputStream, servletOutputStream);
    } finally {
        servletOutputStream.flush();
        Utils.closeQuitely(servletOutputStream);
        fileToDownload = null;
    }

ক্লায়েন্ট পাশ বাস্তবায়ন (jquery ব্যবহার করে):

$.ajax({
type: 'POST',
contentType: 'application/json',
    url: <download file url>,
    data: JSON.stringify(postObject),
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    },
    success: function(message, textStatus, response) {
       var header = response.getResponseHeader('Content-Disposition');
       var fileName = header.split("=")[1];
       var blob = new Blob([message]);
       var link = document.createElement('a');
       link.href = window.URL.createObjectURL(blob);
       link.download = fileName;
       link.click();
    }
});   

0

এজ্যাক্সে ওয়েব পৃষ্ঠা ডাউনলোড করার জন্য আরও একটি সমাধান রয়েছে। তবে আমি এমন একটি পৃষ্ঠা উল্লেখ করছি যা প্রথমে প্রক্রিয়া করা হবে এবং তারপরে ডাউনলোড করতে হবে।

প্রথমে আপনাকে ফলাফল ডাউনলোড থেকে পৃষ্ঠা প্রসেসিং আলাদা করতে হবে।

1) কেবলমাত্র পাতার গণনাগুলি আজাক্স কলে করা হয়।

p .পোস্ট ("ক্যালকুলাসপেজ.এফপি", {ক্যালকুলাস ফাংশন: সত্য, আইডি: 29, ডেটা 1: "এ", ডেটা 2: "বি"},

       ফাংশন (তথ্য, স্থিতি) 
       {
            যদি (স্থিতি == "সাফল্য") 
            {
                / * 2) উত্তরে পূর্বের গণনাগুলি ব্যবহার করে যে পৃষ্ঠাটি ডাউনলোড করা হবে। উদাহরণস্বরূপ, এটি এমন একটি পৃষ্ঠা হতে পারে যা আজাক্স কলে গণনা করা একটি সারণীর ফলাফলগুলি মুদ্রণ করে। * /
                window.location.href = DownloadPage.php + "? আইডি =" + 29;
            }               
       }
);

// উদাহরণস্বরূপ: ক্যালকুলাসপেজ.এফপি

    যদি (! খালি ($ _ পোষ্ট ["ক্যালকুলাস ফাংশন"])) 
    {
        $ আইডি = $ _POST ["আইডি"];

        $ ক্যোরি = "উদাহরণ পৃষ্ঠায় অন্তর্ভুক্ত করুন (ডেটা 1, ডেটা 2) ভ্যালু ('"। P _ পোস্ট ["ডেটা 1"]। "', '"। P _ পোস্ট ["ডেটা 2"]। "') আইডি কোথায়?" $ আইডি;
        ...
    }

// উদাহরণস্বরূপ: DownloadPage.php এ

    $ ID = $ _GET ["আইডি"];

    ede sede = "উদাহরণ পৃষ্ঠাটি থেকে নির্বাচন করুন * যেখানে আইডি =" $ আইডি;
    ...

    $ ফাইলের নাম = "Export_Data.xls";
    শিরোনাম ("বিষয়বস্তুর ধরণ: অ্যাপ্লিকেশন / vnd.ms-Excel");
    শিরোনাম ("বিষয়বস্তু-বিভাজন: ইনলাইন; ফাইলের নাম = $ ফাইলের নাম");

    ...

আমি আশা করি এই সমাধানটি অনেকের পক্ষে কার্যকর হতে পারে, যেমনটি আমার জন্য ছিল।


0

যদি প্রতিক্রিয়াটি অ্যারে বাফার হয় তবে এজ্যাক্সে অনসেস ইভেন্টের অধীনে এটি ব্যবহার করে দেখুন:

 if (event.data instanceof ArrayBuffer) {
          var binary = '';
          var bytes = new Uint8Array(event.data);
          for (var i = 0; i < bytes.byteLength; i++) {
              binary += String.fromCharCode(bytes[i])
          }
          $("#some_id").append("<li><img src=\"data:image/png;base64," + window.btoa(binary) + "\"/></span></li>");
          return;
      }
  • যেখানে ইভেন্ট.ডেটা এক্সএইচআর ইভেন্টের সাফল্যের ফাংশনে প্রাপ্ত প্রতিক্রিয়া।

0

নীচে কয়েকটি আইডি সমন্বিত কিছু তালিকার উপর নির্ভর করে একাধিক ফাইল ডাউনলোড করার এবং আমার ডাটাবেসে অনুসন্ধান করার জন্য আমার সমাধানটি দেওয়া আছে, ফাইলগুলি নির্ধারিত হবে এবং ডাউনলোডের জন্য প্রস্তুত থাকবে - যদি সেগুলি বিদ্যমান থাকে। আমি আজাক্স ব্যবহার করে প্রতিটি ফাইলের জন্য সি # এমভিসি অ্যাকশন কল করছি।

এবং হ্যাঁ, অন্যরা যেমন বলেছেন, jQuery আজাক্সে এটি করা সম্ভব। আমি এটি আজাক্স সাফল্যের সাথে করেছি এবং আমি সর্বদা 200 টি প্রতিক্রিয়া প্রেরণ করছি।

সুতরাং, এটি মূল:

  success: function (data, textStatus, xhr) {

এবং এটি আমার কোড:

var i = 0;
var max = 0;
function DownloadMultipleFiles() {
            if ($(".dataTables_scrollBody>tr.selected").length > 0) {
                var list = [];
                showPreloader();
                $(".dataTables_scrollBody>tr.selected").each(function (e) {
                    var element = $(this);
                    var orderid = element.data("orderid");
                    var iscustom = element.data("iscustom");
                    var orderlineid = element.data("orderlineid");
                    var folderPath = "";
                    var fileName = "";

                    list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName: fileName });
                });
                i = 0;
                max = list.length;
                DownloadFile(list);
            }
        }

তারপরে ফোন করা:

function DownloadFile(list) {
        $.ajax({
            url: '@Url.Action("OpenFile","OrderLines")',
            type: "post",
            data: list[i],
            xhrFields: {
                responseType: 'blob'
            },
            beforeSend: function (xhr) {
                xhr.setRequestHeader("RequestVerificationToken",
                    $('input:hidden[name="__RequestVerificationToken"]').val());

            },
            success: function (data, textStatus, xhr) {
                // check for a filename
                var filename = "";
                var disposition = xhr.getResponseHeader('Content-Disposition');
                if (disposition && disposition.indexOf('attachment') !== -1) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(data);
                    a.href = url;
                    a.download = filename;
                    document.body.append(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                }
                else {
                    getErrorToastMessage("Production file for order line " + list[i].orderLineId + " does not exist");
                }
                i = i + 1;
                if (i < max) {
                    DownloadFile(list);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            },
            complete: function () {
                if(i===max)
                hidePreloader();
            }
        });
    }

সি # এমভিসি:

 [HttpPost]
 [ValidateAntiForgeryToken]
public IActionResult OpenFile(OrderLineSimpleModel model)
        {
            byte[] file = null;

            try
            {
                if (model != null)
                {
                    //code for getting file from api - part is missing here as not important for this example
                    file = apiHandler.Get<byte[]>(downloadApiUrl, token);

                    var contentDispositionHeader = new System.Net.Mime.ContentDisposition
                    {
                        Inline = true,
                        FileName = fileName
                    };
                    //    Response.Headers.Add("Content-Disposition", contentDispositionHeader.ToString() + "; attachment");
                    Response.Headers.Add("Content-Type", "application/pdf");
                    Response.Headers.Add("Content-Disposition", "attachment; filename=" + fileName);
                    Response.Headers.Add("Content-Transfer-Encoding", "binary");
                    Response.Headers.Add("Content-Length", file.Length.ToString());

                }
            }
            catch (Exception ex)
            {
                this.logger.LogError(ex, "Error getting pdf", null);
                return Ok();
            }

            return File(file, System.Net.Mime.MediaTypeNames.Application.Pdf);
        }

যতক্ষণ আপনি 200 প্রতিক্রিয়া প্রত্যাবর্তন করবেন, এজাক্সে সাফল্য এটির সাথে কাজ করতে পারে, আপনি যাচাই করতে পারেন ফাইলটি আসলে বিদ্যমান আছে কিনা এই ক্ষেত্রে নীচের লাইনটি মিথ্যা হবে এবং আপনি ব্যবহারকারীকে সে সম্পর্কে অবহিত করতে পারেন:

 if (disposition && disposition.indexOf('attachment') !== -1) {

0

আমার কাছে @ আলাইন-ক্রুজ এর একই ধরণের সমাধান প্রয়োজন, তবে একাধিক ডাউনলোডের সাথে সংখ্যায় / মানতে হবে। আমি জানি ব্রাউজারগুলি একাধিক ফাইল ডাউনলোডগুলি ব্লক করে, এবং আমার কাছে এপিআই রয়েছে যা সিএসভি ফর্ম্যাট করা ডেটার একটি সেট দেয় returns আমি প্রথমে জেএসজিপ ব্যবহার করতে যাচ্ছিলাম তবে আমার কাছে IE সমর্থন দরকার তাই আমার সমাধানটি এখানে। যদি কেউ আমাকে এটি উন্নত করতে সহায়তা করতে পারে তবে তা দুর্দান্ত হবে তবে এটি এখন পর্যন্ত আমার পক্ষে কাজ করছে।

এপিআই রিটার্ন:

data : {
  body: {
    fileOne: ""col1", "col2", "datarow1.1", "datarow1.2"...so on",
    fileTwo: ""col1", "col2"..."
  }
}

page.vue:

<template>
  <b-link @click.prevent="handleFileExport">Export<b-link>
</template>

export default = {
   data() {
     return {
       fileNames: ['fileOne', 'fileTwo'],
     }
   },
  computed: {
    ...mapState({
       fileOne: (state) => state.exportFile.fileOne,
       fileTwo: (state) => state.exportFile.fileTwo,
    }),
  },
  method: {
    handleExport() {
      //exportFileAction in store/exportFile needs to return promise
      this.$store.dispatch('exportFile/exportFileAction', paramsToSend)
        .then(async (response) => {
           const downloadPrep = this.fileNames.map(async (fileName) => {
           // using lodash to get computed data by the file name
           const currentData = await _.get(this, `${fileName}`);
           const currentFileName = fileName;
           return { currentData, currentFileName };
         });
         const response = await Promise.all(downloadPrep);
         return response;
       })
       .then(async (data) => {
         data.forEach(({ currentData, currentFileName }) => {
           this.forceFileDownload(currentData, currentFileName);
         });
       })
       .catch(console.error);
    },
    forceFileDownload(data, fileName) {
     const url = window.URL
         .createObjectURL(new Blob([data], { type: 'text/csv;charset=utf-8;' }));
     const link = document.createElement('a');
     link.href = url;
     link.setAttribute('download', `${fileName}.csv`);
     document.body.appendChild(link);
     link.click();
   },
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.