JQuery.Ajax द्वारा एक फ़ाइल डाउनलोड करें

Question

मैं फ़ाइल डाउनलोड करने के लिए सर्वर साइड में एक Struts2 कार्रवाई की है।

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

फायरबग में मुझे लगता है कि डेटा को बाइनरी स्ट्रीम के साथ पुनर्प्राप्त किया गया है । मुझे आश्चर्य है कि फ़ाइल डाउनलोड करने वाली खिड़की कैसे खोलें जिसके साथ उपयोगकर्ता स्थानीय रूप से फ़ाइल को बचा सकता है?

Comments

के संभावित डुप्लिकेट कैसे PHP का उपयोग फ़ाइल का नाम क्लिक करने पर एक फाइल डाउनलोड करने के लिए?

— पक्के डेका

मैंने इसे मंच अंतर के बावजूद एक डुप्लिकेट के रूप में चिह्नित किया, क्योंकि जहां तक ​​मैं देख सकता हूं कि समाधान एक ही है (आप इसे अजाक्स के माध्यम से करने की आवश्यकता नहीं कर सकते हैं)।

— पक्का डेका

तो, बिना ajax, बस window.location = "download.action? para1 = value1 ...." का उपयोग करें?

— hguser

Answer 1

2019 आधुनिक ब्राउज़र अपडेट

यह वह तरीका है जिसे मैं अब कुछ कैविएट के साथ सुझाऊंगा:

• एक अपेक्षाकृत आधुनिक ब्राउज़र की आवश्यकता है
• यदि फ़ाइल बहुत बड़ी होने की उम्मीद है, तो आपको मूल दृष्टिकोण (iframe और कुकी) के समान कुछ करने की संभावना होनी चाहिए, क्योंकि नीचे दिए गए कुछ ऑपरेशन संभवत: सिस्टम मेमोरी को कम से कम उपभोग कर सकते हैं क्योंकि फ़ाइल डाउनलोड की जा रही है और / या अन्य दिलचस्प CPU दुष्प्रभाव।

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 फ़ाइल डाउनलोड बनाया, जो बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए OnSuccess और OnFailure कॉलबैक के साथ फ़ाइल डाउनलोड के साथ एक "अजाक्स की तरह" अनुभव की अनुमति देता है। सामान्य समस्या पर मेरे ब्लॉग पोस्ट पर एक नज़र डालें जो प्लगइन हल करता है और इसका उपयोग करने के कुछ तरीके और कार्रवाई में jQuery फ़ाइल डाउनलोड का डेमो भी है । यहाँ स्रोत है

यहां वादों के साथ प्लगइन स्रोत का उपयोग करके एक सरल उपयोग केस डेमो है । डेमो पृष्ठ कई अन्य, 'बेहतर UX' साथ ही उदाहरण भी शामिल है।

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

इस बात पर निर्भर करता है कि आपको किन ब्राउज़र का समर्थन करने की आवश्यकता है, आप https://github.com/eligrey/FileSaver.js/ का उपयोग करने में सक्षम हो सकते हैं, जो IFRAME विधि jQuery फ़ाइल डाउनलोड उपयोगों की तुलना में अधिक स्पष्ट नियंत्रण की अनुमति देता है।

Comments

मुझे अच्छा लगता है कि आपने क्या बनाया है लेकिन मुझे संदेह है कि अधिक StackOverFlow क्रेडिट प्राप्त करने के लिए यहां आपके उत्तर में थोड़ा और विस्तार होना चाहिए। विशेष रूप से इस बात पर कि आपने समस्या को कैसे हल किया।

— एंथनीवो

यह अच्छा होगा यदि आप इसका उल्लेख करेंगे कि कैसे यह "प्लगइन" सीमा के आसपास हो जाता है, बजाय इसके कि हम इसे देखने के लिए अपने ब्लॉग / प्लगइन स्रोत पर जाने के लिए मजबूर करें। उदाहरण के लिए, क्या यह बजाय एक iframe पर पोस्ट कर रहा है? क्या इसके बजाय दूरस्थ स्क्रिप्ट को फ़ाइल को सहेजने और एक url को वापस करने की आवश्यकता है?

— केविन बी

@asgerhallas ज़रूर, लेकिन अगर पूरी तरह बेकार हो गया तो उक्त लिंक चली जाएगी।

— केविन बी

मैं मानता हूं, आपके प्लगइन का उपयोग कैसे करें और यह कैसे काम करता है, इसका एक लंबा विवरण रखने के लिए एक ब्लॉग एक बेहतर जगह है। लेकिन आप कम से कम एक संक्षिप्त अवलोकन दे सकते हैं कि यह प्लगइन समस्या को कैसे हल करता है। उदाहरण के लिए, यह सर्वर को कुकी सेट करके समस्या को हल करता है और आपके जावास्क्रिप्ट को लगातार मौजूद रहता है जब तक कि वह मौजूद न हो जाए। एक बार मौजूद होने के बाद, हम मान सकते हैं कि डाउनलोड पूरा हो गया है। इस तरह की जानकारी के साथ कोई भी आसानी से अपने स्वयं के समाधान को बहुत तेज़ी से रोल कर सकता है, और उत्तर अब आपके ब्लॉग / प्लगइन / jquery पर 100% निर्भर नहीं करता है और अन्य पुस्तकालयों पर लागू किया जा सकता है।

— केविन बी

रॉयई, जैसा कि मैंने समझा कि AJAX कभी भी फ़ाइल डाउनलोड का समर्थन नहीं कर सकता है, जिसके परिणामस्वरूप डिस्क को बचाने के लिए फ़ाइल डाउनलोड पॉपअप होता है। क्या आपको कोई ऐसा रास्ता मिल गया है जिससे मैं अनजान हूँ?

— जॉन कुल्विनर

Answer 2

किसी ने भी @ Pekka के समाधान को पोस्ट नहीं किया ... इसलिए मैं इसे पोस्ट करूंगा। यह किसी की मदद कर सकता है।

आपको अजाक्स के माध्यम से ऐसा करने की आवश्यकता नहीं है। महज प्रयोग करें

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

Comments

एक अच्छा ... जैसा कि मैं डाउनलोड फ़ाइल प्रॉम्प्ट को संभालने और jjery ajax का उपयोग करने के साथ संघर्ष कर रहा था..और यह समाधान मेरे लिए पूरी तरह से काम करता है .. + 1

— swapnesh

ध्यान दें कि इसके लिए सर्वर को 'अटैचमेंट' के कंटेंट-डिस्पोजल हेडर वैल्यू को सेट करने की आवश्यकता होती है, अन्यथा ब्राउज़र रिस्पॉन्स कंटेंट को रीडायरेक्ट (और प्रदर्शित) करेगा

— ब्रिचिंस

या वैकल्पिक रूप window.open(<url>, '_blank');से यह सुनिश्चित करने के लिए उपयोग करें कि डाउनलोड आपके वर्तमान ब्राउज़र सामग्री (सामग्री-विवाद हेडर की परवाह किए बिना) को प्रतिस्थापित नहीं करेगा।

— क्रिस्टोफर किंग

इस समाधान के साथ समस्या यह है कि यदि ऑपरेशन विफल हो जाता है / सर्वर एक त्रुटि देता है, तो आपका पृष्ठ त्रुटि पृष्ठ पर पुनर्निर्देशित हो जाएगा। हल करने के लिए कि iFrame समाधान का उपयोग करें

— kofifus

इस समाधान के साथ वास्तविक समस्या - सवाल POSTअनुरोध के बारे में है ।

— एटमॉस्क

Answer 3

आप HTML5 के साथ कर सकते हैं

NB: फ़ाइल डेटा लौटाया जाना चाहिए क्योंकि आप JSON द्विआधारी डेटा सांकेतिक शब्दों में बदलना नहीं कर सकते क्योंकि base64 एन्कोडेड होना चाहिए

मेरी 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)
    }
}

इसका मतलब है कि मैं AJAX के माध्यम से एक फ़ाइल को बचाने के लिए निम्नलिखित कर सकता हूं

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

यह अच्छा है अगर आपका सर्वर सेवटा को डंप कर रहा है। हालाँकि, मैंने काफी काम नहीं किया है कि कोई HTML4 कमबैक कैसे लागू करेगा

Comments

a.click()फ़ायरफ़ॉक्स में काम करने का मन नहीं करता ... कोई विचार?

— Bigpony

कुछ ब्राउज़रों में आपको aइस कोड को काम करने और / या निकालने के लिए डोम को जोड़ने की आवश्यकता हो सकती है revokeObjectURL:document.body.appendChild(a)

— bigpony

मेरा दिन बचाया (और संभवतः नौकरी भी :)) किसी भी उपाय से जावास्क्रिप्ट विशेषज्ञ नहीं ... अधिक जावा लड़का। हालाँकि, मुझे नहीं पता कि एक साधारण "createObjectURL (नया ब्लॉब ([एटब (बेस 64)))" क्यों काम नहीं करता है! यह बस नहीं है, जबकि सभी वृत्ति कहते हैं कि यह होना चाहिए। grrr ...

— apil.tamang

लाइन में var bytechars = atob(base64)यह एक त्रुटि फेंकता है JavaScript runtime error: InvalidCharacterError। मैं क्रोम संस्करण 75.0.3770.142 का उपयोग कर रहा हूं, लेकिन मुझे नहीं पता कि यहां क्या गलत है।

— मुफ्लिक्स

Answer 4

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>टैग के साथ बनाए गए URL पर OGNL के साथ टैगिंग पॉइंट का उपयोग करना बेहतर होगा :<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)। आपको सामग्री प्रकार भी निर्दिष्ट करने की आवश्यकता है, और आप फ़ाइल का नाम और लंबाई जोड़ना चाह सकते हैं (ब्राउज़र को यथार्थवादी प्रगति पट्टी खींचने में मदद करने के लिए)।

उदाहरण के लिए, जब एक ज़िप डाउनलोड करें:

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

Struts2 के साथ (जब तक आप एक्शन को सर्वलेट के रूप में उपयोग नहीं कर रहे हैं, प्रत्यक्ष स्ट्रीमिंग के लिए एक हैक , उदाहरण के लिए), आपको सीधे प्रतिक्रिया के लिए कुछ भी लिखने की आवश्यकता नहीं है; बस स्ट्रीम परिणाम प्रकार का उपयोग करके और इसे 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>

3. फ्रेमवर्क एग्नॉस्टिक (/ स्ट्रट्स 2 फ्रेमवर्क): ब्राउज़र के अंदर सर्वलेट (/ एक्शन) खोलने वाली फाइल

यदि आप फ़ाइल को ब्राउज़र के अंदर खोलना चाहते हैं, तो इसे डाउनलोड करने के बजाय, सामग्री-स्वभाव को इनलाइन पर सेट किया जाना चाहिए , लेकिन लक्ष्य वर्तमान विंडो स्थान नहीं हो सकता है; आपको जावास्क्रिप्ट द्वारा बनाई गई एक नई विंडो को लक्षित करना होगा, <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>

Comments

महोदय, आपका इनपुट: "कंटेंट-डिस्पोजल", "इनलाइन; .... खराब कोडर का दिन बचा लिया :)

— वेदरन मैरिसविक।

यह एकमात्र उत्तर है जो "window.open" का उल्लेख करता है (टिप्पणियों में से एक इसका उल्लेख करता है)।

— एंड्रयू कोस्टर

यदि आपके पास बहुत सारे पैरामीटर हैं, तो यह काम नहीं करता है, क्योंकि आपको too long urlत्रुटि मिलेगी ।

— मुफ्लिक्स

Answer 5

ब्राउज़र को फ़ाइल डाउनलोड करने का सरल तरीका यह है कि इस तरह से अनुरोध करें:

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

यह ब्राउज़र डाउनलोड पॉप अप को खोलता है।

Comments

धन्यवाद, मैंने इस समाधान का उपयोग किया। एक जादू की तरह काम किया। इसके अलावा, अगर आपको प्रतिक्रिया से बूँद नहीं मिलती है, तो बस एक नया बूँद बनाएँ।

— fabio.sang

आईई हैंडलिंग लिंक के

— शुरू होता है

@StartsWith_R से लिंक वास्तव में मदद करता है अगर आप IE11 के साथ काम कर रहे हैं

— alexventuraio

धन्यवाद यह मेरे लिए काम किया!

— जकी मोहम्मद

Answer 6

मैंने वर्कअराउंड सॉल्यूशन (@JohnCulviner प्लगइन द्वारा प्रेरित) के रूप में बहुत कम फ़ंक्शन बनाए हैं:

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

Comments

हालांकि यह सर्वर के लिए बहुत ही अजीब तरीके से डेटा भेजता है । मुझे आश्चर्य है कि क्या यह अनुरूप POST बनाने के लिए बदला जा सकता है?

— शायने

Answer 7

मैंने उसी मुद्दे का सामना किया और इसे सफलतापूर्वक हल किया। मेरा उपयोग-मामला यह है।

" JSON डेटा को सर्वर पर पोस्ट करें और एक एक्सेल फाइल प्राप्त करें। वह एक्सेल फाइल सर्वर द्वारा बनाई गई है और क्लाइंट की प्रतिक्रिया के रूप में दी गई है। उस प्रतिक्रिया को ब्राउजर में कस्टम नाम वाली फाइल के रूप में डाउनलोड करें। "

$("#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 के रूप में एक सरणी पोस्ट करना।
• एक ब्लॉब (बाइनरी) के रूप में सामग्री लाने के बाद, हम एक डाउनलोड करने योग्य URL बना रहे हैं और इसे अदृश्य "लिंक" पर क्लिक करके इसे संलग्न कर रहे हैं। मैंने यहां एक POST रिक्वेस्ट की। इसके बजाय, आप एक साधारण GET के लिए भी जा सकते हैं। हम Ajax के माध्यम से फ़ाइल डाउनलोड नहीं कर सकते, XMLHttpRequest का उपयोग करना चाहिए।

यहां हमें सर्वर साइड पर कुछ चीजों को सावधानीपूर्वक सेट करने की आवश्यकता है। मैंने पायथन Django HttpResponse में कुछ हेडर सेट किए हैं। यदि आप अन्य प्रोग्रामिंग भाषाओं का उपयोग करते हैं तो आपको उनके अनुसार सेट करने की आवश्यकता है।

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

चूंकि मैं यहां xls (एक्सेल) डाउनलोड करता हूं, इसलिए मैंने contentType को एक से ऊपर समायोजित किया है। आपको इसे अपने फ़ाइल प्रकार के अनुसार सेट करने की आवश्यकता है। इस तकनीक का इस्तेमाल आप किसी भी तरह की फाइल को डाउनलोड करने के लिए कर सकते हैं।

Comments

"हम Ajax के माध्यम से फ़ाइल डाउनलोड नहीं कर सकते, XMLHttpRequest का उपयोग करना चाहिए"। XMLHttpRequest परिभाषा के अनुसार AJAX है। अन्यथा आधुनिक वेब ब्राउज़र के लिए महान समाधान। IE के लिए, जो समर्थन नहीं करता है HTMLAnchorElement.download, मैं इसे मालिकाना msSaveOrOpenBlob विधि के साथ संयोजन करने के बारे में सोच रहा हूं ।

— त्सही अशर

Answer 8

ठीक है, ndpu के कोड के आधार पर ajax_download का उन्नत (मुझे लगता है) संस्करण विधमान है; -

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

Params को उचित पोस्ट Params के रूप में भेजा जाता है जैसे कि इनपुट से आने के बजाय पिछले उदाहरण के अनुसार jSON एन्कोडेड स्ट्रिंग के रूप में।

गुफा: उन रूपों पर चर इंजेक्शन की क्षमता के बारे में सावधान रहें। उन चरों को एनकोड करने का एक सुरक्षित तरीका हो सकता है। वैकल्पिक रूप से उनसे बचने के बारे में चिंतन करें।

Comments

यह काम कर रहा उदाहरण है। धन्यवाद। क्या यह संभव है कि बिना iframe के लेकिन window.location के बिना?

— मारेक बार

मुझे लगता है कि आप डोम के निचले भाग में छिपे हुए रूप को जोड़ सकते हैं। संभवतः खोज लायक भी शैडो डोम का उपयोग होता है, हालांकि पुराने ब्राउज़रों पर यह अच्छी तरह से समर्थित नहीं है।

— शाएनी

इस कोड में मुझे यह त्रुटि मिल रही है। 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) लेकिन यह काम नहीं कर रहा है ..

— bartex9

शून्य: यह संभवतः किसी प्रकार का क्रॉस मूल सुरक्षा मुद्दा होगा। Thats शायद एक पूरे ढेर अतिप्रवाह सवाल में और इसके स्व। @ बारटेक्स 9: यह इस बात पर बहुत अधिक निर्भर करेगा कि आपके उपयोग की रूपरेखा किस प्रकार की है। लेकिन सिद्धांत नाम और पथ को लेने और स्टोर करने का होगा, जो कि फ़ाइल को फ़ाइल सिस्टम के वेब एक्सेस क्षेत्र में धकेलता है, या उच्च उपलब्धता के लिए amazon S3 जैसा कुछ है

— Shayne

Answer 9

यहाँ मैंने क्या किया, शुद्ध जावास्क्रिप्ट और html। इसका परीक्षण नहीं किया लेकिन यह सभी ब्राउज़रों में काम करना चाहिए।

जावास्क्रिप्ट समारोह

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

Comments

ऐसा लगता है कि आपके लोड ईवेंट को सामग्री-वितरण अनुलग्नक सामग्री के लिए नहीं बुलाया गया है (क्योंकि कुछ भी iframe में लोड नहीं किया गया है), अगर यह आपके लिए काम करता है (आपको

— कंसोल

यहाँ एक त्वरित फिडेल jsfiddle.net/y2xezyoj है जो फेयर ईवेंट गधे को जल्द ही फेयर करता है जैसे ही पीडीएफ फाइल आईफ्रेम में लोड होती है .. यह फिडेल डाउनलोड नहीं होता है डाउनलोड करने के लिए कुंजी सर्वर साइड में है। -प्रदर्शन "," अनुलग्नक ; फ़ाइल नाम = \ "" + फ़ाइलनाम + ".xlsx \" ")";

— manukyanv07

हाँ यह उस स्थिति में काम करेगा, लेकिन यदि फ़ाइल डाउनलोड की जाती है, तो वह सर्वर सामग्री-विवाद भेजता है: अनुलग्नक, फिर लोड घटना में आग नहीं लगेगी जो मेरी बात थी

— kofifus

सर्वर पूरी तरह से फ़ाइल भेजने की प्रक्रिया शुरू होने के बाद आप पूरी तरह से सही लोड घटना है। यह वही है जो मैं देख रहा था, 1- बटन को ब्लॉक करें और प्रोसेसिंग दिखाएं ताकि उपयोगकर्ता के पास एक प्रतिक्रिया हो सके कि चीजें हो रही हैं। 2 - फिर जब सर्वर प्रोसेसिंग किया जाता है और फ़ाइल को भेजने के बारे में 3- (लोड घटना को निकाल दिया जाता है) जहां मैं बटन को अनलॉक करता हूं और प्रसंस्करण स्पिनर 4 को हटा देता हूं - उपयोगकर्ता अब सेव फ़ाइल से पॉप अप हो जाता है या ब्राउज़र इसे डाउनलोड करना शुरू कर देता है परिभाषित डाउनलोड स्थान। मेरी अंग्रेज़ी के लिये क्षमा।

— manukyanv07

Answer 10

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

Comments

क्या आप अपना उत्तर बता सकते हैं? इससे दूसरों को यह समझने में मदद मिलेगी कि आपने क्या किया है ताकि वे अपनी तकनीकों को अपनी स्थितियों पर लागू कर सकें।

— वाई हा ली

बस एक चेतावनी: सफारी और IE downloadविशेषता का समर्थन नहीं करते हैं , इसलिए आपकी फ़ाइल का नाम "अज्ञात" होगा

— यांगशुन ताई

Answer 11

रेल में, मैं इसे इस तरह से करता हूं:

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

चाल Window.location हिस्सा है। नियंत्रक की विधि इस प्रकार है:

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

Comments

त्वरित प्रश्न, क्या यह फ़ाइल को दो बार उत्पन्न नहीं करेगा? एक बार आप अजाक्स अनुरोध भेजें। फिर आप पृष्ठ को उसी URL पर पुनर्निर्देशित करते हैं। हम इसे कैसे खत्म कर सकते हैं?

— कोडरह

मेरे मामले में नहीं। मैंने केवल क्रोम पर इसका परीक्षण किया था।

— अनारकली

जैसा कि कोडर पहले से ही सही ढंग से बताता है, कार्रवाई को दो बार कहा जाता है।

— स्वेन

यह मेरे लिए भी दो बार कहा जा रहा है।

— CSquared

Answer 12

Https://developer.mozilla.org/en-US/docs/Web/API/Window/open का उपयोग window.open करें

उदाहरण के लिए, आप कोड की इस लाइन को एक क्लिक हैंडलर में डाल सकते हैं:

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

यह एक नया टैब खोलेगा ('_blank' विंडो-नाम के कारण) और वह टैब URL को खोलेगा।

आपके सर्वर-साइड कोड में भी कुछ ऐसा होना चाहिए:

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

और इस तरह, ब्राउज़र को उपयोगकर्ता को फ़ाइल को डिस्क में सहेजने के लिए संकेत देना चाहिए, बजाय केवल उन्हें फ़ाइल दिखाने के। यह स्वचालित रूप से उस टैब को बंद कर देगा जो उसने अभी खोला था।

Answer 13

मैं एक CSV फ़ाइल डाउनलोड करने का प्रयास करता हूं और फिर डाउनलोड समाप्त होने के बाद कुछ करता हूं। इसलिए मुझे एक उपयुक्त callbackकार्य को लागू करने की आवश्यकता है ।

उपयोग करना window.location="..."एक अच्छा विचार नहीं है क्योंकि मैं डाउनलोड करने के बाद प्रोग्राम को संचालित नहीं कर सकता। ऐसा कुछ है, हेडर बदलें ताकि यह एक अच्छा विचार न हो।

fetchएक अच्छा विकल्प है, लेकिन यह IE 11 का समर्थन नहीं कर सकता है । और window.URL.createObjectURLसमर्थन नहीं कर सकता आईई 11.You उल्लेख कर सकते हैं इस ।

यह मेरा कोड है, यह शाहरुख आलम के कोड के समान है। लेकिन आपको ध्यान रखना चाहिए कि window.URL.createObjectURLशायद मेमोरी लीक्स बनाएं। आप उल्लेख कर सकते हैं इस । जब प्रतिक्रिया आ गई है, तो डेटा को ब्राउज़र की मेमोरी में संग्रहीत किया जाएगा। इससे पहले कि आप aलिंक पर क्लिक करें, फ़ाइल डाउनलोड हो गई है। इसका मतलब है कि आप डाउनलोड के बाद कुछ भी कर सकते हैं।

$.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)
}

Answer 14

AJAX द्वारा प्राप्त करने के बाद फ़ाइल को कैसे डाउनलोड करें

यह सुविधाजनक है जब फ़ाइल लंबे समय के लिए बनाई गई है और आपको PRELOADER दिखाने की आवश्यकता है

वेब फ़ॉर्म सबमिट करते समय उदाहरण:

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

उदाहरण को सरल बनाने के लिए वैकल्पिक कार्यात्मक पर टिप्पणी की जाती है।

सर्वर पर अस्थायी फ़ाइलें बनाने की आवश्यकता नहीं है।

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').

Comments

सामग्री-विवाद से फ़ाइल नाम प्राप्त करने के लिए, इस मैच ने मेरे लिए काम किया: filename.match(/filename=(.*)/)[1](दोहरे उद्धरण या प्रश्न चिह्न के बिना) - regex101.com/r/2AsD4y/2 । हालाँकि, आपका समाधान एकमात्र समाधान था जिसने बहुत खोज करने के बाद काम किया।

— jstuardo

Answer 15

फ़ाइल डाउनलोड करने के लिए उपरोक्त उत्तर में कुछ और चीज़ें जोड़ना

नीचे कुछ जावा वसंत कोड है जो बाइट ऐरे उत्पन्न करता है

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

अब FileSaver.js का उपयोग करके जावास्क्रिप्ट कोड में, नीचे दिए गए कोड के साथ एक फ़ाइल डाउनलोड कर सकते हैं

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

उपरोक्त फ़ाइल डाउनलोड करेगा

Answer 16

ठीक है तो यहां एमवीसी का उपयोग करते समय काम करने वाला कोड है और आप अपनी फाइल को एक नियंत्रक से प्राप्त कर रहे हैं

मान लें कि आपके पास अपनी बाइट सरणी की घोषणा है और आबादी है, केवल एक चीज जो आपको करने की ज़रूरत है वह है फ़ाइल फ़ंक्शन (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
            }
        });

Answer 17

मुझे यह ठीक लगा कि जब यह वास्तव में अजाक्स का उपयोग नहीं कर रहा है तो यह आपको डाउनलोड का अनुरोध करने के लिए एक जावास्क्रिप्ट कॉल का उपयोग करने की अनुमति देता है और फिर डाउनलोड शुरू होने पर कॉलबैक प्राप्त करता है। मुझे यह मददगार लगा अगर लिंक एक सर्वर साइड स्क्रिप्ट चलाता है जो फ़ाइल भेजने से पहले इसे लिखने के लिए थोड़ा सा लेता है। तो आप उन्हें चेतावनी दे सकते हैं कि यह प्रसंस्करण है, और फिर जब यह अंततः फ़ाइल को उस प्रसंस्करण अधिसूचना को हटा देता है। यही कारण है कि मैं ajax के माध्यम से फ़ाइल को लोड करने की कोशिश करना चाहता था ताकि मैं शुरू कर सकूं ताकि एक घटना तब हो सकती है जब फ़ाइल का अनुरोध किया जाता है और दूसरा जब वह वास्तव में डाउनलोड करना शुरू करता है।

सामने पृष्ठ पर js

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

आइफ्रेम

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

मुझे लगता है कि js का उपयोग करके डेटा प्राप्त करने का एक तरीका है, तो फिर php की आवश्यकता नहीं होगी। लेकिन मैं इसे बंद हाथ नहीं जानता और सर्वर का उपयोग कर रहा हूँ php का समर्थन करता है तो यह मेरे लिए काम करता है। मैंने सोचा था कि अगर यह किसी की मदद करता है तो मैं इसे साझा करूंगा।

Answer 18

यदि आप jQuery फ़ाइल डाउनलोड का उपयोग करना चाहते हैं, तो कृपया IE के लिए इस पर ध्यान दें। आपको प्रतिक्रिया रीसेट करने की आवश्यकता है या यह डाउनलोड नहीं होगा

    //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()

Answer 19

यह निश्चित है कि आप इसे अजाक्स कॉल के माध्यम से नहीं कर सकते हैं।

हालाँकि, एक समाधान है।

कदम :

यदि आप फ़ाइल डाउनलोड करने के लिए form.submit () का उपयोग कर रहे हैं, तो आप क्या कर सकते हैं:

1. क्लाइंट से सर्वर पर अजाक्स कॉल बनाएं और सत्र के अंदर फ़ाइल स्ट्रीम को संग्रहीत करें।
2. सर्वर से "सफलता" लौटाए जाने पर, सत्र में संग्रहीत फ़ाइल स्ट्रीम को स्ट्रीम करने के लिए अपने फॉर्म.सुमिट () को कॉल करें।

यह उस स्थिति में मददगार होता है जब आप यह तय करना चाहते हैं कि फॉर्म बनाने के बाद फाइल को डाउनलोड किया जाना है या नहीं। दुर्घटनाग्रस्त होने पर, आपको ग्राहक पक्ष पर एक कस्टम संदेश दिखाने की आवश्यकता हो सकती है, ऐसे में यह कार्यान्वयन मदद कर सकता है।

Answer 20

अजाक्स में वेब पेज डाउनलोड करने का एक और उपाय है। लेकिन मैं एक ऐसे पृष्ठ की बात कर रहा हूँ जिसे पहले संसाधित किया जाना चाहिए और फिर डाउनलोड किया जाना चाहिए।

सबसे पहले आपको परिणाम डाउनलोड करने से पेज प्रसंस्करण को अलग करना होगा।

1) अजाक्स कॉल में केवल पृष्ठ गणना की जाती है।

$ .post ("CalculusPage.php", {calculusFunction: true, ID: 29, data1: "a", data2: "b"},

       फ़ंक्शन (डेटा, स्थिति) 
       {
            अगर (स्थिति == "सफलता") 
            {
                / * 2) उत्तर में वह पृष्ठ जो पिछली गणनाओं का उपयोग करता है, डाउनलोड किया जाता है। उदाहरण के लिए, यह एक पृष्ठ हो सकता है जो अजाक्स कॉल में गणना की गई तालिका के परिणामों को प्रिंट करता है। * /
                window.location.href = DownloadPage.php + "; ID =" + 29;
            }               
       }
);

// उदाहरण के लिए: कैल्क्युपासपेज.फैप में

    अगर (खाली ($ _ POST ["कलन विधि"])) 
    {
        $ आईडी = $ _POST ["आईडी"];

        $ क्वेरी = "INSERT INTO ExamplePage (data1, data2) VALUES ('"। $ _ POST ["data1"]। "', '"। $ _ POST ["data2"] "" "WHERE id =" $ ID
        ...
    }

// उदाहरण के लिए: DownloadPage.php में

    $ आईडी = $ _GET ["आईडी"];

    $ sede = "SELECT * FROM ExamplePage WHERE id ="। $ ID;
    ...

    $ फ़ाइल नाम = "Export_Data.xls";
    शीर्ष लेख ("सामग्री-प्रकार: अनुप्रयोग / vnd.ms-excel");
    शीर्ष लेख ("सामग्री-विवाद: इनलाइन; फ़ाइल नाम = $ फ़ाइल नाम");

    ...

मुझे उम्मीद है कि यह समाधान कई लोगों के लिए उपयोगी हो सकता है, क्योंकि यह मेरे लिए था।

Answer 21

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

Comments

कोड केवल उत्तरों में कम से कम एक minumum विवरण होना चाहिए जिसमें यह बताया गया हो कि कोड कैसे काम करता है और यह प्रश्न का उत्तर क्यों देता है।

— रॉबर्टो कैबोनी

Answer 22

यह किसी भी ब्राउज़र में इतना अच्छा काम करता है (मैं asp.net कोर का उपयोग कर रहा हूँ)

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

        }

Answer 23

मैं लंबे समय तक इस मुद्दे से जूझता रहा। अंत में यहाँ सुझाई गई एक सुरुचिपूर्ण बाहरी लाइब्रेरी ने मेरी मदद की।