कस्टम शीर्षलेख

Question

के साथ AJAX फ़ाइल डाउनलोड करें मैं एक यूआरएल को अनुरोध भेजना चाहता हूं जो मुझे फ़ाइल डाउनलोड संवाद बॉक्स प्रदान करता है। उसी समय सर्वर को अनुरोध शीर्षलेख में कुछ मानकों की आवश्यकता होती है। इसलिए मैं अनुरोध में एक कस्टम शीर्षलेख डालना चाहता हूं और प्रतिक्रिया में एक फ़ाइल प्राप्त करना चाहता हूं। क्या कोई तरीका है कि हम इसे प्राप्त कर सकते हैं?

धन्यवाद, अमित

Answer 1

शायद मैं अपनी बात नहीं मिलता है।

क्या मुझे लगता है कि इस तरह है:

//server xxx.php 
//omit some code 
echo '<a href="file_path" id="download">file_name</a>'; 

//browser 
ajax({ 
    url: 'http://xxxx/xxx.php', 
    success: function(html){ 
     //append to dom and TODO other manipulations 
     $(dom).append(html); 
     $('#download').trigger('click'); 
     $(dom).remove(html); 
    } 
}) 

Answer 2

ठीक है, मैं एक पुराने आवेदन मैं था में जाँच की और यहाँ एक नमूना है। आपको अनुकूलित करने की आवश्यकता होगी लेकिन विचार यहां है। यह पहला भाग एक अनुरोध इंटरसेप्टर विशेषता का हिस्सा है जो WebMethod पर रखा गया है। संपूर्ण इंटरसेप्टर काफी जटिल है क्योंकि यह कई मामलों का प्रबंधन करता है।

int byteSize = 262144; 
byte[] data = new byte[byteSize]; 

if (!String.IsNullOrEmpty(myfileName)) 
{ 
    _context.Response.AddHeader("Content-disposition", "attachment; filename=\"" + myfileName+ "\""); 
} 

_context.Response.ContentType = DefaultContentType; 
_context.Response.Cache.SetCacheability(HttpCacheability.Private); 
_context.Response.Cache.SetExpires(DateTime.UtcNow.AddHours(1)); 
_context.Response.Buffer = false; 
_context.Response.BufferOutput = false; 
_context.Response.AddHeader("Content-length", myStreamSize.ToString()); 

try 
{ 
    int counter = 0; 
    int bytesRead = mystream.Read(data, 0, byteSize); 
    while ((long)counter < myStreamSize|| bytesRead > 0) 
    { 
     counter += bytesRead; 
     if (bytesRead < byteSize) 
     { 
      byte[] outBuf = new byte[bytesRead]; 
      Array.Copy(data, outBuf, bytesRead); 
      _context.Response.BinaryWrite(outBuf); 
     } 
     else 
     { 
      _context.Response.BinaryWrite(data); 
     } 
     bytesRead = mystream.Read(data, 0, byteSize); 
    } 
} 
finally 
{ 
    mystream.Close(); 
    mystream.Dispose(); 
} 
_context.Response.End(); 

क्लाइंट पक्ष पर जावास्क्रिप्ट में यह दूसरा हिस्सा है। हमने jQuery के बजाय ExtJS का उपयोग किया।

downloadFile: function(url, getArgs) { 
    if(!this.iframe) 
    { 
     this.iframe = document.createElement("iframe"); 
     this.iframe.className = "x-hidden"; 
     document.body.appendChild(this.iframe); 
    } 

    var args = Ext.urlEncode(getArgs); 
    url = url + (args ? ("?" + args) : ""); 
    this.iframe.src = url; 
} 

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

मुझे आशा है कि यह पता करने में मदद करता

Answer 3

a तत्व उपयोग करने का प्रयास अनुरोध के लिए शीर्ष लेख को data-* सेट, headers विकल्प a तत्व data-headers वस्तु के लिए सेट के साथ $.ajax() साथ।

$.ajax()success पर file.name या अस्थायी फ़ाइल नाम के Blob के रूप में जवाबी कार्रवाई के लिए a तत्व href सेट objectURL भीतर, download विशेषता, a तत्व पर .click() फोन को सक्रिय संवाद "Save File" करने के लिए।

$(document).ready(function() { 
 
    $("input[type=button]").click(function() { 
 
    // set `data-headers` object 
 
    var el = $("[data-headers]"); 
 
    el.data("headers")["x-custom-headers"] = $("input[type=text]")[0].value 
 
     || el.data("headers")["x-custom-headers"]; 
 
    $.ajax({ 
 
     url: URL.createObjectURL(new Blob([$("textarea").val()], { 
 
     type: "text/plain" 
 
     })), 
 
     type: "GET", 
 
     // set `headers` to `a` element `data-headers` object 
 
     headers: $("[data-headers]").data("headers"), 
 
     beforeSend: function(jqxhr) { 
 
     console.log(this.headers); 
 
     alert("custom headers" + JSON.stringify(this.headers)); 
 
     }, 
 
     success: function(data, textStatus, jqxhr) { 
 
     var file = new Blob([data], { 
 
      "type": jqxhr.getResponseHeader("Content-Type") 
 
     }); 
 
     console.log(data, file); 
 
     $("textarea, input[type=text]").val(""); 
 
     $("a") 
 
      .attr({ 
 
      "href": URL.createObjectURL(file), 
 
      "download": file.name || "file-" + $.now() 
 
      }).on("click", function() { 
 
      $(this).remove() 
 
      }) 
 
      .get(0).click(); 
 
     }, 
 
     error: function(jqxhr, textStatus, errorThrown) { 
 
     console.log(textStatus, errorThrown) 
 
     } 
 
    }); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<textarea maxlength="5" placeholder="echo"></textarea> 
 
<br> 
 
<!-- set `x-custom-header` to `input type="text"` value --> 
 
<input type="text" maxlength="5" placeholder="set request header" /> 
 
<br /> 
 
<input type="button" value="download" /> 
 
<!-- set default `x-custom-header` to "123" --> 
 
<a data-headers='{"x-custom-headers":"123"}'></a>

Answer 4

मैं क्या समझ से कि आप वेब कि एक प्रमाणीकरण हैडर आवश्यकता है, लेकिन एक सरल लिंक के साथ डाउनलोड नहीं किया जा सकता से एक फ़ाइल का अनुरोध करना चाहते है।

आपको तब करने की आवश्यकता है जब डेटा को ब्लॉब के रूप में डाउनलोड करने के लिए प्रमाणीकरण शीर्षलेख के साथ अजाक्स कॉल करना है। फिर ग्राहक की ओर से डेटा को बचाने

---

jQuery के ajax/तरीकों dosen't समर्थन responseType = ब्लॉब

तो इस उदाहरण नवीनतम Fetch API Blink और Firefox में उपयोग कर रहा है मिलता है। क्रॉस ब्राउज़र समस्याओं को संभालने के तरीकों के विपरीत क्लाइंट-साइड जेनरेट ब्लॉब को सहेजने के लिए यह FileSaver.js का भी उपयोग करता है।

fetch("/", {headers: {"X-mashape-key": "XXXXXX-4-YYYYYY"}}) 
    .then(response => { 
     // we can get the filename if the 
     // response headers contains Content-Disposition 
     var cd = response.headers.get("Content-Disposition"); 
     var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1]; 

     response.blob().then( 
      blob => window.saveAs(blob, name || "index.html") 
     ) 
    }) 

यह भी कुछ नए suger सिंटैक्स ES6 कि कोलाहल या Traceur

साथ es5 करने के लिए आप एक fetch polyfill नहीं लगाते हैं तो और पुराने ब्राउज़र समर्थन करने की आवश्यकता transpiled किया जा सकता है में उपलब्ध है का उपयोग करें - आप तो XHR

var xhr = new XMLHttpRequest(); 
xhr.responseType = 'blob'; 
xhr.open("get", "/"); 
xhr.setRequestHeader("X-mashape-key", "XXXXXX-4-YYYYYY"); 
xhr.send(); 
xhr.onload = function(){ 
    var cd = xhr.getResponseHeader("Content-Disposition") 
    var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1]; 

    window.saveAs(xhr.response, name || "index.html") 
}