JQuery.Ajax দ্বারা একটি ফাইল ডাউনলোড করুন


420

ফাইল ডাউনলোডের জন্য আমার কাছে একটি স্ট্রুটস 2 অ্যাকশন রয়েছে।

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

তবে আমি যখন jQuery ব্যবহার করে অ্যাকশনটি কল করব:

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

ফায়ারব্যাগে আমি দেখতে পাই বাইনারি স্ট্রিমের সাথে ডেটা পুনরুদ্ধার করা হয়েছে । আমি ভাবছি যে ফাইল ডাউনলোডিং উইন্ডোটি কীভাবে ব্যবহারকারী ফাইলটি স্থানীয়ভাবে সংরক্ষণ করতে পারে?



1
প্ল্যাটফর্মের পার্থক্য থাকা সত্ত্বেও আমি এটি সদৃশ হিসাবে চিহ্নিত করেছি, কারণ যতদূর আমি দেখতে পাচ্ছি সমাধানটি একই (আপনি এজ্যাক্সের মাধ্যমে এটি করার প্রয়োজন নেই এবং প্রয়োজন নেই)।
পেক্কা

1
সুতরাং, এজ্যাক্স ছাড়াই, কেবল উইন্ডোটি ব্যবহার করুন oc লোকেশন = "ডাউনলোড.অ্যাকশন? প্যারা 1 = মান 1 ...."?
hguser

উত্তর:


676

2019 আধুনিক ব্রাউজার আপডেট

আমি এখন কয়েকটি সতর্কতার সাথে এই পদ্ধতির পরামর্শ দিচ্ছি:

  • তুলনামূলকভাবে আধুনিক ব্রাউজারের প্রয়োজন
  • যদি ফাইলটি খুব বড় আকারের প্রত্যাশিত হয় তবে আপনার সম্ভবত মূল পদ্ধতির (আইফ্রেমে এবং কুকি) অনুরূপ কিছু করা উচিত কারণ নীচের কিছু অপারেশন সম্ভবত ফাইলটি ডাউনলোড করা এবং / অথবা অন্যান্য আকর্ষণীয় সিপিইউর অন্তত বৃহত্তর সিস্টেমে মেমরি গ্রহণ করতে পারে ক্ষতিকর দিক.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 আসল jQuery / iframe / কুকি ভিত্তিক পদ্ধতির

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

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

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

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

আপনাকে যে ব্রাউজারগুলি সমর্থন করতে হবে তার উপর নির্ভর করে আপনি https://github.com/eligrey/FileSaver.js/ ব্যবহার করতে সক্ষম হতে পারেন যা আইএফআরএম পদ্ধতি jQuery ফাইল ডাউনলোডের ব্যবহারের চেয়ে আরও সুস্পষ্ট নিয়ন্ত্রণের অনুমতি দেয়।


69
আপনি যা বানিয়েছেন তা আমি পছন্দ করি তবে আমি সন্দেহ করি যে আরও স্ট্যাকওভারফ্লো ক্রেডিট পেতে আপনার উত্তরটিতে এখানে আরও কিছু বিশদ থাকতে হবে। আপনি কীভাবে সমস্যার সমাধান করেছেন তা বিশেষ করে।
অ্যান্টনিভিও

14
আপনার ব্লগ / প্লাগইন উত্সটি দেখার জন্য আমাদের বাধ্য করার চেয়ে আপনি যদি এই "প্লাগইন" সীমাবদ্ধতার কাছাকাছি চলে আসেন ঠিক কীভাবে উল্লেখ করেন তবে ভাল লাগবে। উদাহরণস্বরূপ, এটি পরিবর্তে একটি আইফ্রেমে পোস্ট করা হচ্ছে? ফাইলটি সংরক্ষণ এবং এটিতে কোনও ইউআরএল ফিরিয়ে দেওয়ার জন্য কি এটির পরিবর্তে দূরবর্তী স্ক্রিপ্টের প্রয়োজন?
কেভিন বি

2
@ এসগারহাল্লস শিওর, তবে লিঙ্কটি যদি চলে যায় তবে তা সম্পূর্ণই অকেজো।
কেভিন বি

26
আমি সম্মত, আপনার প্লাগইন কীভাবে ব্যবহার করতে হবে এবং কীভাবে এটি কাজ করে তার দীর্ঘ বিবরণ দেওয়ার জন্য একটি ব্লগ একটি আরও ভাল জায়গা। তবে আপনি কীভাবে এই প্লাগইনটি সমস্যার সমাধান করে তার একটি সংক্ষিপ্ত ওভারভিউ দিতে পারত। উদাহরণস্বরূপ, সার্ভারটি একটি কুকি সেট করে এবং আপনার জাভাস্ক্রিপ্টটি অবিচ্ছিন্নভাবে কুকির সন্ধান না করে সমস্যাটি সমাধান করে। এটি উপস্থিত থাকলে, আমরা ধরে নিতে পারি যে ডাউনলোডটি সম্পূর্ণ হয়েছে। এই ধরণের তথ্যের সাহায্যে খুব সহজেই নিজের সমাধানটি খুব দ্রুত সমাধান করতে পারে এবং উত্তরটি আর আপনার ব্লগ / প্লাগইন / জ্যাকুয়েরিতে 100% নির্ভর করে না এবং অন্যান্য লাইব্রেরিতে প্রয়োগ করা যেতে পারে।
কেভিন বি

1
রায়, আমি বুঝতে পারছি যে এজেএক্স কখনই ফাইল ডাউনলোডগুলিকে সমর্থন করতে পারে না যার ফলস্বরূপ ডিস্কে সংরক্ষণের জন্য কোনও ফাইল ডাউনলোড পপআপ আসে। আপনি কি এমন কোনও উপায় খুঁজে পেয়েছেন যা সম্পর্কে আমি অজানা?
জন কালভিনার

227

নুন এই @ পেকার সমাধান পোস্ট করেছেন ... তাই আমি এটি পোস্ট করব। এটি কাউকে সাহায্য করতে পারে।

এজ্যাক্সের মাধ্যমে আপনার এটি করার দরকার নেই। শুধু ব্যবহার

window.location="download.action?para1=value1...."

4
খুব সুন্দর ... আমি ডাউনলোড ফাইল প্রম্পটটি পরিচালনা করার জন্য এবং জ্যাকোরি এজ্যাক্স ব্যবহার করার সাথে লড়াই করে যাচ্ছিলাম এবং এই সমাধানটি আমার পক্ষে নিখুঁতভাবে কাজ করে .. + 1
স্বপ্নলেশ

45
নোট করুন যে এর জন্য সার্ভারের জন্য 'সংযুক্তি' এর বিষয়বস্তু-বিস্তারের শিরোনাম মান সেট করা দরকার, অন্যথায় ব্রাউজারটি প্রতিক্রিয়ার সামগ্রীটিতে (এবং প্রদর্শন) পুনঃনির্দেশ করবে
ব্রিচিন্স

21
বা বিকল্পটি window.open(<url>, '_blank');ডাউনলোডগুলি আপনার বর্তমান ব্রাউজার সামগ্রীটি (সামগ্রী-বিশৃঙ্খলা শিরোনাম নির্বিশেষে) প্রতিস্থাপন করবে না তা নিশ্চিত করতে ব্যবহার করুন use
ক্রিস্টোফার কিং

4
এই সমাধানটির সমস্যাটি হ'ল যদি অপারেশন ব্যর্থ হয় / সার্ভার কোনও ত্রুটি ফিরিয়ে দেয় তবে আপনার পৃষ্ঠাটি ত্রুটি পৃষ্ঠায় পুনঃনির্দেশিত হবে। সেই সমাধানের জন্য আইফ্রেম
সলিউশনটি

4
এই সমাধানের সাথে আসল সমস্যা - প্রশ্নটি হল POSTঅনুরোধ about
এটমোস্ক

35

আপনি HTML5 দিয়ে পারেন

এনবি: ফিরতি দেওয়া ফাইলের ডেটা বেস64 এনকোড হওয়া আবশ্যক কারণ আপনি বাইনারি ডেটা JSON এনকোড করতে পারবেন না

আমার AJAXপ্রতিক্রিয়াতে আমার কাছে এমন একটি ডেটা স্ট্রাকচার রয়েছে যা দেখে মনে হচ্ছে:

{
    result: 'OK',
    download: {
        mimetype: string(mimetype in the form 'major/minor'),
        filename: string(the name of the file to download),
        data: base64(the binary data as base64 to download)
    }
}

এর মানে হল যে আমি এজেএক্সের মাধ্যমে কোনও ফাইল সংরক্ষণ করতে নিম্নলিখিতগুলি করতে পারি

var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
    // Do it the HTML5 compliant way
    var blob = base64ToBlob(result.download.data, result.download.mimetype);
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = result.download.filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

ফাংশন বেস 64ToBlob এখান থেকে নেওয়া হয়েছিল এবং এই ফাংশন মেনে চলতে হবে অবশ্যই

function base64ToBlob(base64, mimetype, slicesize) {
    if (!window.atob || !window.Uint8Array) {
        // The current browser doesn't have the atob function. Cannot continue
        return null;
    }
    mimetype = mimetype || '';
    slicesize = slicesize || 512;
    var bytechars = atob(base64);
    var bytearrays = [];
    for (var offset = 0; offset < bytechars.length; offset += slicesize) {
        var slice = bytechars.slice(offset, offset + slicesize);
        var bytenums = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            bytenums[i] = slice.charCodeAt(i);
        }
        var bytearray = new Uint8Array(bytenums);
        bytearrays[bytearrays.length] = bytearray;
    }
    return new Blob(bytearrays, {type: mimetype});
};

আপনার সার্ভারটি সেভ করার জন্য ফাইলটা ডাম্পিং করা ভাল good যাইহোক, আমি কীভাবে একজন এইচটিএমএল 4 ফ্যালব্যাকটি বাস্তবায়িত করব তা বেশ কার্যকর করেছি


1
a.click()ফায়ারফক্স কাজ বলে মনে হচ্ছে না ... কোন ধারণা?
বিগপনি

কিছু কোড ব্রাউজারে aএই কোডটি কাজ করতে এবং / অথবা revokeObjectURLঅংশটি সরাতে আপনাকে document.body.appendChild(a)
ডোমে যুক্ত করতে হবে

আমার দিন বাঁচিয়েছে (এবং সম্ভবত একটি কাজও :)) কোনও পরিমাপের দ্বারা জাভাস্ক্রিপ্ট বিশেষজ্ঞ নয় ... আরও জাভা লোক। তবে, আমার কোনও ধারণা নেই কেন একটি সরল "ক্রিয়েওবজেক্ট URL (নতুন ব্লব ([atob (বেস 64)]))" কাজ করে না! এটি সহজভাবে হয় না, যখন সমস্ত প্রবৃত্তি এটি অবশ্যই বলে। grrr ...
apil.tamang

লাইনে var bytechars = atob(base64)এটি একটি ত্রুটি ছুড়ে দেয় JavaScript runtime error: InvalidCharacterError। আমি ক্রোম সংস্করণ 75.0.3770.142 ব্যবহার করছি তবে আমি জানি না, এখানে কী ভুল।
মুফ্লিক্স

27

1. ফ্রেমওয়ার্ক অগ্নিস্টিক: সংযুক্তি হিসাবে সার্লেটলেট ডাউনলোড ফাইল

<!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>

2. স্ট্রুটস 2 ফ্রেমওয়ার্ক: সংযুক্তি হিসাবে অ্যাকশন ডাউনলোড ফাইল

<!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>

এতে ব্যবহার করুন ভাল হবে <s:a>সঙ্গে ট্যাগ ইশারা OGNL একটি থেকে URL টি দিয়ে তৈরি <s:url>ট্যাগ:

<!-- without JS, with Struts tags: THE RIGHT WAY -->    
<s:url action="downloadAction.action" var="url">
    <s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>

উপরে ক্ষেত্রে, আপনি প্রয়োজন লিখতে সামগ্রী-স্বভাব থেকে হেডার প্রতিক্রিয়া যে উল্লেখ ডাউনলোড করা ফাইল চাহিদা ( attachment) এবং ব্রাউজার দ্বারা খোলা নেই ( inline)। আপনি প্রয়োজন নির্দিষ্ট করার বিষয়বস্তুর প্রকার খুব, এবং আপনি (সাহায্য ব্রাউজার একটি বাস্তবসম্মত progressbar অঙ্কন) ফাইল নাম এবং দৈর্ঘ্য যোগ করতে পারেন।

উদাহরণস্বরূপ, একটি জিপ ডাউনলোড করার সময়:

response.setContentType("application/zip");
response.addHeader("Content-Disposition", 
                   "attachment; filename=\"name of my file.zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...

স্ট্রুটস 2 এর সাথে (আপনি যদি সার্চলেট হিসাবে হ্যাক ব্যবহার না করেন তবে হ্যাক) unless সরাসরি স্ট্রিমিংয়ের জন্য , উদাহরণস্বরূপ), আপনাকে প্রতিক্রিয়াতে সরাসরি কিছু লেখার প্রয়োজন নেই; কেবল ব্যবহার স্ট্রিম ফলাফলের প্রকার কাজ এবং struts.xml এটা কনফিগার হবে: EXAMPLE টি

<result name="success" type="stream">
   <param name="contentType">application/zip</param>
   <param name="contentDisposition">attachment;filename="${fileName}"</param>
   <param name="contentLength">${fileLength}</param>
</result>

৩. ফ্রেমওয়ার্ক অগ্নিস্টিক (/ স্ট্রুটস ২ ফ্রেমওয়ার্ক): ব্রাউজারের ভিতরে সার্লেট (/ ক্রিয়া) ফাইল খোলার

আপনি যদি ফাইলটি ডাউনলোড না করে ব্রাউজারের ভিতরে খুলতে চান তবে সামগ্রী-স্বভাবটি অবশ্যই ইনলাইনে সেট করতে হবে , তবে লক্ষ্যটি বর্তমান উইন্ডোর অবস্থান হতে পারে না; আপনাকে অবশ্যই জাভাস্ক্রিপ্ট দ্বারা তৈরি করা একটি নতুন উইন্ডো, <iframe>পৃষ্ঠায় একটি, বা "আলোচিত" টার্গেট = "_ ফাঁকা" দিয়ে ফ্লাই-অন-ফ্লাইয়ে তৈরি করা একটি নতুন উইন্ডোকে লক্ষ্য করতে হবে:

<!-- From a parent page into an IFrame without javascript -->   
<a href="downloadServlet?param1=value1" target="iFrameName">
    download
</a>

<!-- In a new window without javascript --> 
<a href="downloadServlet?param1=value1" target="_blank">
    download
</a>

<!-- In a new window with javascript -->    
<a href="javascript:window.open('downloadServlet?param1=value1');" >
    download
</a>

2
স্যার, আপনার ইনপুট: "বিষয়বস্তু-বিশৃঙ্খলা", "ইনলাইন; .... দরিদ্র কোডারের দিনটি সংরক্ষণ করেছে :)
বেদরান মেরিসেভিক

1
এটিই কেবলমাত্র উত্তর যা "উইন্ডো.পেন" উল্লেখ করেছে (মন্তব্যের মধ্যে একটিতে এটি উল্লেখ করা হয়েছে)।
অ্যান্ড্রু কোস্টার

আপনার অনেকগুলি পরামিতি থাকলে এটি কাজ করে না, কারণ আপনি too long urlত্রুটি পাবেন।
মুফ্লিক্স

25

ব্রাউজারটি কোনও ফাইল ডাউনলোড করার সহজ উপায় হ'ল অনুরোধটি করা:

 function downloadFile(urlToSend) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 }

এটি ব্রাউজার ডাউনলোড পপ আপ খুলবে।


3
ধন্যবাদ, আমি এই সমাধানটি ব্যবহার করেছি। কবজির মতো কাজ করেছেন। এছাড়াও, যদি আপনি প্রতিক্রিয়া থেকে একটি ব্লব না পান, কেবল একটি নতুন ব্লব তৈরি করুন।
fabio.sang

6
আইই হ্যান্ডলিং লিঙ্ক
8W3_18

@ স্টার্টস উইথ_আর এর লিঙ্কটি সত্যই সহায়তা করে যদি আপনি আইই 11 এর সাথে কাজ করছেন
alexventuraio

ধন্যবাদ এটি আমার জন্য কাজ করেছে!
জাকি মোহাম্মদ

23

আমি কাজের সমাধান হিসাবে সামান্য ফাংশন তৈরি করেছি (@ জনকুলভিনার প্লাগইন দ্বারা অনুপ্রাণিত):

// creates iframe and form in it with hidden field,
// then submit form with provided data
// url - form url
// data - data to form field
// input_name - form hidden input name

function ajax_download(url, data, input_name) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" +
                  "<input type=hidden name='" + input_name + "' value='" +
                  JSON.stringify(data) +"'/></form>" +
                  "</body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

ক্লিক ইভেন্ট সহ ডেমো:

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2}, 'dataname');
});

এটি সার্ভারে যদিও খুব অদ্ভুত উপায়ে ডেটা প্রেরণ করে । আমি আশ্চর্য হই যে এটি অনুবর্তী পোষ্ট তৈরি করতে পরিবর্তন করা যেতে পারে?
শায়নে

16

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

" সার্ভারে 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")

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


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

15

ঠিক আছে, এনডিপু-র কোডের ভিত্তিতে আজেক্স_ডাউনলোডের উন্নত (আমার ধারণা) সংস্করণ;

function ajax_download(url, data) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" 

    Object.keys(data).forEach(function(key){
        iframe_html += "<input type='hidden' name='"+key+"' value='"+data[key]+"'>";

    });

        iframe_html +="</form></body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

এটি এর মতো ব্যবহার করুন; -

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2});
});

পূর্ববর্তী উদাহরণ অনুসারে জেসন এনকোডেড স্ট্রিংয়ের পরিবর্তে কোনও ইনপুট থেকে আগত প্যারামগুলিকে যথাযথ পোস্ট প্যারাম হিসাবে প্রেরণ করা হয়।

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


এটি কাজ উদাহরণ। ধন্যবাদ। উইন্ডো.লোকশন ছাড়া ইফ্রেমে ব্যতীত এটি করা কি সম্ভব?
মেরেক বার

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

এই কোডটিতে আমি এই ত্রুটিটি পাচ্ছি। Uncaught SecurityError: Blocked a frame with origin "http://foo.bar.com" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.
বাতিল

আমি এই ফর্মটি কিছু মডেল শ্রেণিতে কীভাবে ম্যাপ করতে পারি? আমার আছে: @ResourceMapping() public void downloadFile(final ResourceRequest request, final ResourceResponse response, @ModelAttribute("downForm") FormModel model) তবে এটি কাজ করছে না ..
বারটেক্স 9

অকার্যকর: এটি সম্ভবত ক্রস উত্স সুরক্ষা সমস্যা এক প্রকার হতে পারে। এটি সম্ভবত একটি সম্পূর্ণ স্ট্যাক ওভারফ্লো প্রশ্ন এবং এটি নিজেই। @ বারটেক্স 9: এটি আপনার কোন ধরণের ফ্রেমওয়ার্ক ব্যবহার করছে তা নির্ভর করবে। তবে নীতিটি হ'ল নাম এবং পথ গ্রহণ করা এবং সেটি সংরক্ষণ করা, যখন ফাইলটি নিজেই ফাইল সিস্টেমের ওয়েব অ্যাক্সেসযোগ্য অঞ্চলে বা উচ্চ প্রাপ্যতার জন্য অ্যামাজন এস 3 এর মতো কিছুতে স্থান দেওয়া
শায়নে

8

আমি যা করেছি তা এখানে খাঁটি জাভাস্ক্রিপ্ট এবং এইচটিএমএল। এটি পরীক্ষা করে নি তবে এটি সমস্ত ব্রাউজারে কাজ করা উচিত।

জাভাস্ক্রিপ্ট ফাংশন

var iframe = document.createElement('iframe');
iframe.id = "IFRAMEID";
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'SERVERURL'+'?' + $.param($scope.filtro);
iframe.addEventListener("load", function () {
     console.log("FILE LOAD DONE.. Download should start now");
});

সমস্ত ব্রাউজারগুলিতে সমর্থিত কেবলমাত্র উপাদানগুলি ব্যবহার করা ছাড়া কোনও অতিরিক্ত লাইব্রেরি নেই।

এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন

এখানে আমার সার্ভার সাইড জাভা স্প্রিং কন্ট্রোলার কোড।

@RequestMapping(value = "/rootto/my/xlsx", method = RequestMethod.GET)
public void downloadExcelFile(@RequestParam(value = "param1", required = false) String param1,
    HttpServletRequest request, HttpServletResponse response)
            throws ParseException {

    Workbook wb = service.getWorkbook(param1);
    if (wb != null) {
        try {
            String fileName = "myfile_" + sdf.format(new Date());
            response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + ".xlsx\"");
            wb.write(response.getOutputStream());
            response.getOutputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    }

দেখে মনে হচ্ছে আপনার লোড ইভেন্টটি বিষয়বস্তু-সম্পর্কিত সংযুক্তি বিষয়বস্তুর জন্য ডাকা হয়নি (কারণ কোনও কিছুই iframe এ লোড করা হয় না), যদি এটি আপনার পক্ষে কাজ করে (আপনি
কনসোল.লগ পান

এখানে একটি দ্রুত ফিজল jsfiddle.net/y2xezyoj এই পিডিএফ ফাইলটি iframe এ লোড হওয়ার সাথে সাথেই লোড ইভেন্ট অ্যাস অ্যাসিডে আগুন জ্বলিয়ে দেয় .. ডাউনলোড করার জন্য কীটি এই সার্চটি ডাউনলোড করে না সার্ভারের পাশে "প্রতিক্রিয়া.সেটহিডার (" বিষয়বস্তু -ডিস্পিজেশন "," সংযুক্তি ; ফাইলের নাম = \ "" + ফাইলের নাম + "। এক্সএলএক্সএক্স \" ");"
manukyanv07

1
হ্যাঁ এটি সেক্ষেত্রে কাজ করবে, তবে ফাইলটি ডাউনলোড করা থাকলে সার্ভারটি বিষয়বস্তু-স্বভাব: সংযুক্তি প্রেরণ করে, তবে লোড ইভেন্টটি আমার পয়েন্টে আগুন দেবে না
কোফফাস

আপনার সম্পূর্ণরূপে ঠিক আছে লোড ইভেন্টটি সার্ভারটি শেষ হওয়ার পরেই ফাইলটি প্রেরণ শুরু করার পরে বরখাস্ত করা হয়। এটি আমি যা খুঁজছিলাম, 1- বোতামটি ব্লক করুন এবং প্রসেসিং দেখান যাতে ব্যবহারকারীর প্রতিক্রিয়া জানাতে পারে যে ঘটনাগুলি ঘটছে। 2 - তারপরে সার্ভারটি প্রক্রিয়াজাত হয়ে গেলে এবং ফাইলটি প্রেরণ করতে চলেলে 3- (লোড ইভেন্টটি বহিস্কার করা হয়) যেখানে আমি বোতামটি আনলক করি এবং প্রসেসিং স্পিনার 4 সরিয়ে ফেলি - ব্যবহারকারী এখন সেভ ফাইলের সাথে পপ আপ হয় বা ব্রাউজারটি এটি ডাউনলোড শুরু করে সংজ্ঞায়িত ডাউনলোডের অবস্থান। দুঃখিত আমার ইংরেজি.
manukyanv07

5
function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

আপনি আপনার উত্তর ব্যাখ্যা করতে পারেন? এটি অন্যকে আপনি কী করেছেন তা বুঝতে সহায়তা করবে যাতে তারা তাদের কৌশলগুলি তাদের পরিস্থিতিতে প্রয়োগ করতে পারে।
ওয়াই হা লি

2
কেবলমাত্র একটি সতর্কতা: সাফারি এবং আইটি downloadবৈশিষ্ট্যটিকে সমর্থন করে না , সুতরাং আপনার ফাইলটির নাম "অজানা" থাকবে
ইয়াংশুন টেই

4

কারাগারে, আমি এটি এইভাবে করি:

function download_file(file_id) {
  let url       = '/files/' + file_id + '/download_file';
    $.ajax({
    type: 'GET',
    url: url,
    processData: false,
    success: function (data) {
       window.location = url;
    },
    error: function (xhr) {
     console.log(' Error:  >>>> ' + JSON.stringify(xhr));
    }
   });
 }

কৌতুকটি হ'ল উইন্ডো oc লোকেশন অংশ। কন্ট্রোলারের পদ্ধতিটি দেখে মনে হচ্ছে:

# GET /files/{:id}/download_file/
def download_file
    send_file(@file.file,
          :disposition => 'attachment',
          :url_based_filename => false)
end

2
তাত্ক্ষণিক প্রশ্ন, এটি কি দু'বার ফাইল তৈরি করবে না? একবার আপনি এজাক্স অনুরোধ পাঠান। তারপরে আপনি পৃষ্ঠাটিকে একই URL তে পুনঃনির্দেশ করুন। কীভাবে আমরা তা দূর করতে পারি?
কোডারহস

আমার ক্ষেত্রে নয়। যদিও আমি এটি কেবল Chrome এ পরীক্ষা করেছি।
আর্কেরিও

কোডারস যেমন ইতিমধ্যে সঠিকভাবে বলেছে, ক্রিয়াটি দুটিবার কল হয়ে যায়।
সোভেন

এটি আমার জন্যও দু'বার ফোন করা হচ্ছে।
CSquared

4

Https://developer.mozilla.org/en-US/docs/Web/API/Window/open ব্যবহার করুনwindow.open

উদাহরণস্বরূপ, আপনি একটি ক্লিক হ্যান্ডলারের মধ্যে কোডের এই লাইনটি রাখতে পারেন:

window.open('/file.txt', '_blank');

এটি একটি নতুন ট্যাব খুলবে (কারণ '_ ব্ল্যাঙ্ক' উইন্ডো-নামের কারণে) এবং সেই ট্যাবটি ইউআরএল খুলবে।

আপনার সার্ভার-সাইড কোডেও এরকম কিছু হওয়া উচিত:

res.set('Content-Disposition', 'attachment; filename=file.txt');

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


4

আমি একটি সিএসভি ফাইল ডাউনলোড করার চেষ্টা করি এবং তারপরে ডাউনলোড শেষ হয়ে যাওয়ার পরে কিছু করি। সুতরাং আমি একটি উপযুক্ত callbackফাংশন বাস্তবায়ন করা প্রয়োজন ।

ব্যবহার window.location="..."করা ভাল ধারণা নয় কারণ ডাউনলোড শেষ করে আমি প্রোগ্রামটি পরিচালনা করতে পারি না। এর মতো কিছু, শিরোনাম পরিবর্তন করুন এটি ভাল ধারণা নয়।

fetchএটি একটি ভাল বিকল্প তবে এটি আইই 11 সমর্থন করতে পারে না । আর window.URL.createObjectURLসমর্থন করে না আইই 11.You পাঠাতে পারেন এই

এটি আমার কোড, এটি শাহরুখ আলমের কোডের মতো। তবে আপনার যত্ন নেওয়া উচিত যে window.URL.createObjectURLসম্ভবত মেমরি ফাঁস তৈরি করে। পাঠাতে পারেন এই । প্রতিক্রিয়া উপস্থিত হলে, ডেটা ব্রাউজারের স্মৃতিতে সংরক্ষণ করা হবে। সুতরাং আপনি aলিঙ্কে ক্লিক করার আগে ফাইলটি ডাউনলোড হয়ে গেছে। এর অর্থ আপনি ডাউনলোডের পরে কিছু করতে পারেন do

$.ajax({
    url: 'your download url',
    type: 'GET',
}).done(function (data, textStatus, request) {
    // csv => Blob
    var blob = new Blob([data]);

    // the file name from server.
    var fileName = request.getResponseHeader('fileName');

    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else { // for others
    var url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);

    //Do something after download 
    ...

    }
}).then(after_download)
}

4

এজ্যাক্সের মাধ্যমে কোনও ফাইল এটি পাওয়ার পরে কীভাবে ডাউনলোড করবেন

ফাইলটি দীর্ঘ সময়ের জন্য তৈরি হওয়ার সময় এটি সুবিধাজনক এবং আপনার পূর্বনির্ধারকটি দেখাতে হবে

ওয়েব ফর্ম জমা দেওয়ার সময় উদাহরণ:

<script>
$(function () {
    $('form').submit(function () {
        $('#loader').show();
        $.ajax({
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'binary',
            xhrFields: {
                'responseType': 'blob'
            },
            success: function(data, status, xhr) {
                $('#loader').hide();
                // if(data.type.indexOf('text/html') != -1){//If instead of a file you get an error page
                //     var reader = new FileReader();
                //     reader.readAsText(data);
                //     reader.onload = function() {alert(reader.result);};
                //     return;
                // }
                var link = document.createElement('a'),
                    filename = 'file.xlsx';
                // if(xhr.getResponseHeader('Content-Disposition')){//filename 
                //     filename = xhr.getResponseHeader('Content-Disposition');
                //     filename=filename.match(/filename="(.*?)"/)[1];
                //     filename=decodeURIComponent(escape(filename));
                // }
                link.href = URL.createObjectURL(data);
                link.download = filename;
                link.click();
            }
        });
        return false;
    });
});
</script>

উদাহরণটি সহজ করতে ptionচ্ছিক কার্যকরী মন্তব্য করা হয়।

সার্ভারে অস্থায়ী ফাইলগুলি তৈরি করার দরকার নেই।

JQuery v2.2.4 এ ঠিক আছে। পুরানো সংস্করণে একটি ত্রুটি থাকবে:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').

কনটেন্ট-ডিসপজিশন থেকে ফাইলের নাম পেতে, এই মিলটি আমার পক্ষে কাজ করেছে: filename.match(/filename=(.*)/)[1](ডাবল উদ্ধৃতি বা প্রশ্ন চিহ্ন ছাড়াই) - regex101.com/r/2AsD4y/2 । তবে আপনার সমাধানটি হ'ল একমাত্র সমাধান যা অনেকগুলি অনুসন্ধানের পরে কাজ করেছিল।
jstuardo

3

একটি ফাইল ডাউনলোড করার জন্য উপরের উত্তরে আরও কিছু জিনিস যুক্ত করা

নীচে কিছু জাভা স্প্রিং কোড দেওয়া হয়েছে যা বাইট অ্যারে উত্পন্ন করে

@RequestMapping(value = "/downloadReport", method = { RequestMethod.POST })
    public ResponseEntity<byte[]> downloadReport(
            @RequestBody final SomeObejct obj, HttpServletResponse response) throws Exception {

        OutputStream out = new ByteArrayOutputStream();
        // write something to output stream
        HttpHeaders respHeaders = new HttpHeaders();
        respHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        respHeaders.add("X-File-Name", name);
        ByteArrayOutputStream bos = (ByteArrayOutputStream) out;
        return new ResponseEntity<byte[]>(bos.toByteArray(), respHeaders, HttpStatus.CREATED);
    }

এখন জাভাস্ক্রিপ্ট কোড ব্যবহার করে ফাইলসেভার.জেএস, নীচের কোড সহ একটি ফাইল ডাউনলোড করতে পারেন

var json=angular.toJson("somejsobject");
var url=apiEndPoint+'some url';
var xhr = new XMLHttpRequest();
//headers('X-File-Name')
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 201) {
        var res = this.response;
        var fileName=this.getResponseHeader('X-File-Name');
        var data = new Blob([res]);
        saveAs(data, fileName); //this from FileSaver.js
    }
}    
xhr.open('POST', url);
xhr.setRequestHeader('Authorization','Bearer ' + token);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'arraybuffer';
xhr.send(json);

উপরের ফাইল ডাউনলোড করবে


2

ঠিক আছে সুতরাং এমভিসি ব্যবহার করার সময় ওয়ার্কিং কোডটি এখানে রয়েছে এবং আপনি কোনও ফাইল নিয়ন্ত্রকের কাছ থেকে পান

আপনার বাইট অ্যারে ডিক্লেয়ার এবং পপুলেট করার কথা বলতে দেয়, কেবলমাত্র আপনাকে যা করতে হবে তা হল ফাইল ফাংশনটি ব্যবহার করা (System.Web.Mvc ব্যবহার করে)

byte[] bytes = .... insert your bytes in the array
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, "nameoffile.exe");

এবং তারপরে একই কন্ট্রোলারে এইগুলি 2 টি ফাংশন যুক্ত করুন

protected override void OnResultExecuting(ResultExecutingContext context)
    {
        CheckAndHandleFileResult(context);

        base.OnResultExecuting(context);
    }

    private const string FILE_DOWNLOAD_COOKIE_NAME = "fileDownload";

    /// <summary>
    /// If the current response is a FileResult (an MVC base class for files) then write a
    /// cookie to inform jquery.fileDownload that a successful file download has occured
    /// </summary>
    /// <param name="context"></param>
    private void CheckAndHandleFileResult(ResultExecutingContext context)
    {
        if (context.Result is FileResult)
            //jquery.fileDownload uses this cookie to determine that a file download has completed successfully
            Response.SetCookie(new HttpCookie(FILE_DOWNLOAD_COOKIE_NAME, "true") { Path = "/" });
        else
            //ensure that the cookie is removed in case someone did a file download without using jquery.fileDownload
            if (Request.Cookies[FILE_DOWNLOAD_COOKIE_NAME] != null)
                Response.Cookies[FILE_DOWNLOAD_COOKIE_NAME].Expires = DateTime.Now.AddYears(-1);
    }

এবং তারপরে আপনি ডাউনলোড করতে আপনার নিয়ামককে কল করতে সক্ষম হবেন এবং "সাফল্য" বা "ব্যর্থতা" কলব্যাক পাবেন

$.fileDownload(mvcUrl('name of the controller'), {
            httpMethod: 'POST',
            successCallback: function (url) {
            //insert success code

            },
            failCallback: function (html, url) {
            //insert fail code
            }
        });

1

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

প্রথম পৃষ্ঠায় জেএস

function expdone()
{
    document.getElementById('exportdiv').style.display='none';
}
function expgo()
{
   document.getElementById('exportdiv').style.display='block';
   document.getElementById('exportif').src='test2.php?arguments=data';
}

iframe

<div id="exportdiv" style="display:none;">
<img src="loader.gif"><br><h1>Generating Report</h1>
<iframe id="exportif" src="" style="width: 1px;height: 1px; border:0px;"></iframe>
</div>

তারপরে অন্য ফাইলটি:

<!DOCTYPE html>
<html>
<head>
<script>
function expdone()
{
    window.parent.expdone();
}
</script>
</head>
<body>
<iframe id="exportif" src="<?php echo "http://10.192.37.211/npdtracker/exportthismonth.php?arguments=".$_GET["arguments"]; ?>"></iframe>
<script>document.getElementById('exportif').onload= expdone;</script>
</body></html>

আমি মনে করি জেএস ব্যবহার করে ডেটা পাওয়ার একটি উপায় আছে যাতে কোনও পিএইচপি দরকার হয় না। তবে আমি এটি হাতছাড়া জানি না এবং আমি যে সার্ভারটি ব্যবহার করছি তা পিএইচপি সমর্থন করে যাতে এটি আমার পক্ষে কাজ করে। ভেবেছি এটি কারও সাহায্য করার ক্ষেত্রে আমি এটি ভাগ করে নিই।


0

আপনি যদি jQuery ফাইল ডাউনলোড ব্যবহার করতে চান তবে দয়া করে আইইয়ের জন্য এটি নোট করুন। আপনার প্রতিক্রিয়াটি পুনরায় সেট করতে হবে বা এটি ডাউনলোড হবে না

    //The IE will only work if you reset response
    getServletResponse().reset();
    //The jquery.fileDownload needs a cookie be set
    getServletResponse().setHeader("Set-Cookie", "fileDownload=true; path=/");
    //Do the reset of your action create InputStream and return

আপনার ক্রিয়া ServletResponseAware অ্যাক্সেস কার্যকর করতে পারেgetServletResponse()


0

এটি নিশ্চিত যে আপনি এটি আজাক্স কলের মাধ্যমে করতে পারবেন না।

তবে, একটি workaround আছে।

পদক্ষেপ:

আপনি যদি ফাইল ডাউনলোডের জন্য form.submit () ব্যবহার করে থাকেন তবে আপনি যা করতে পারেন তা হ'ল:

  1. ক্লায়েন্ট থেকে সার্ভারে একটি এজাক্স কল তৈরি করুন এবং সেশনের অভ্যন্তরে ফাইল স্ট্রিম সংরক্ষণ করুন।
  2. সার্ভার থেকে "সাফল্য" ফিরে আসার পরে, আপনার ফর্মটিকে কল করুন ub সাবমিশন () সেশনে সঞ্চিত ফাইল স্ট্রিমটি স্রোতে।

আপনি যখন form.submit () তৈরির পরে ফাইল ডাউনলোড করার দরকার আছে কিনা তা সিদ্ধান্ত নিতে চাইলে এটি সহায়ক, উদাহরণস্বরূপ: form.submit () এ সার্ভার সাইডে এবং এর পরিবর্তে একটি ব্যতিক্রম দেখা যায়। ক্র্যাশ হওয়ার কারণে, আপনার ক্লায়েন্টের পক্ষ থেকে একটি কাস্টম বার্তা দেখাতে হবে, এই ক্ষেত্রে এই প্রয়োগটি সহায়তা করতে পারে।


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
The HTML Code:-

'<button type="button" id="GetFile">Get File!</button>'


The jQuery Code:-

'$('#GetFile').on('click', function () {
    $.ajax({
        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/172905/test.pdf',
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = 'myfile.pdf';
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });
});'

কোডের উত্তরগুলিতে কমপক্ষে একটি নূন্যতম বিবরণ থাকতে হবে যাতে কোডটি কীভাবে কাজ করে এবং কেন এটি প্রশ্নের উত্তর দেয়।
রবার্তো ক্যাবনি

0

এটি এটি যে কোনও ব্রাউজারে দুর্দান্ত কাজ করে (আমি এসপিএন কোর ব্যবহার করছি)

            function onDownload() {

  const api = '@Url.Action("myaction", "mycontroller")'; 
  var form = new FormData(document.getElementById('form1'));

  fetch(api, { body: form, method: "POST"})
      .then(resp => resp.blob())
      .then(blob => {
          const url = window.URL.createObjectURL(blob);
        $('#linkdownload').attr('download', 'Attachement.zip');
          $('#linkdownload').attr("href", url);
          $('#linkdownload')
              .fadeIn(3000,
                  function() { });

      })
      .catch(() => alert('An error occurred'));



}
 
 <button type="button" onclick="onDownload()" class="btn btn-primary btn-sm">Click to Process Files</button>
 
 
 
 <a role="button" href="#" style="display: none" class="btn btn-sm btn-secondary" id="linkdownload">Click to download Attachments</a>
 
 
 <form asp-controller="mycontroller" asp-action="myaction" id="form1"></form>
 
 

        function onDownload() {
            const api = '@Url.Action("myaction", "mycontroller")'; 
            //form1 is your id form, and to get data content of form
            var form = new FormData(document.getElementById('form1'));

            fetch(api, { body: form, method: "POST"})
                .then(resp => resp.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    $('#linkdownload').attr('download', 'Attachments.zip');
                    $('#linkdownload').attr("href", url);
                    $('#linkdownload')
                        .fadeIn(3000,
                            function() {

                            });
                })
                .catch(() => alert('An error occurred'));                 

        }

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.