पेज से दूर नेविगेट किए बिना एक डाउनलोड विंडो खोलने का सबसे आसान तरीका

Question

डाउनलोड संवाद खोलने के लिए सबसे अच्छा क्रॉस ब्राउज़र तरीका है (मान लें कि हम कंटेंट-डिस्पोजल सेट कर सकते हैं: हेडर में अटैचमेंट) मौजूदा पेज से दूर किए बिना, या पॉपअप खोलने के बिना, जो कि इंटरनेट एक्सप्लोरर (आईई) में अच्छी तरह से काम नहीं करता है। ) ६।

Answer 1

7 साल बीत चुके हैं और मुझे नहीं पता कि यह IE6 के लिए काम करता है या नहीं, लेकिन यह FF और Chrome में OpenFileDialog का संकेत देता है।

var file_path = 'host/path/file.ext';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Comments

इस समाधान के लिए सबसे पहले धन्यवाद, लेकिन मुझे एक बग मिला, अगर रिमूव के साथ zip अनजिप एरर हो जाएगा, तो इसलिए इस कोड को हटा दें

— रॉय

@ मनोज राणा - मैंने एफएफ 58.0.2 (64-बिट) पर जाँच की है यह काम कर रहा है। यदि आप 2 पंक्तियों के दस्तावेज़ निकालते हैं तो यह किसी भी FF पर काम नहीं करेगा। who.appendChild (a); document.body.removeChild (क);

— 0x000f

इसे एज 16 पर काम करने के लिए हेडर, जहां से फाइल आती है, उसमें Content-Type: application/octet-streamऔर होना चाहिए Content-Disposition: attachment।

— सिमोन

अब यह काम नहीं करता है। Developers.google.com/web/updates/2018/02/…

— Paulius Dragunas

@ user1933131 क्रोम केवल मूल के लिए निकालता है

— Brandy23

Answer 2

यह जावास्क्रिप्ट अच्छा है कि यह एक नई विंडो या टैब नहीं खोलता है।

window.location.assign(url);

Comments

यह window.location = url जैसा ही है; "जब भी कोई नया मान स्थान ऑब्जेक्ट को सौंपा जाता है, तो URL का उपयोग करके एक दस्तावेज़ लोड किया जाएगा जैसे कि window.location.assign () को संशोधित URL के साथ बुलाया गया था" - developer.mozilla.org/en-US/docs/ वेब / एपीआई / window.location

— रोब Juurlink

यह WebSocket कनेक्शन को डिस्कनेक्ट करने का कारण बनता है।

— igorpavlov

मैंने एक ही समाधान का उपयोग किया है, लेकिन यह एक डायलॉग खोलने के बजाय एक ही टैब में फाइल खोलता है।

— टेक्नो क्रैकर

यह window.open (url, '_self') के समान है यदि url डाउनलोड पेज के लिए है।

— विशेषज्ञ

IE11 का उपयोग करते समय मैंने पाया कि इससे JS को रोकना पड़ा। तो IE 11 के लिए मैंने window.open (url, '_blank') का उपयोग किया, जिसने एक और टैब खोला, हालाँकि जब यह फ़ाइल डाउनलोड किया तो टैब बंद हो गया। इससे जेएस चलता रहा।

— ल्यूक

Answer 3

मैं हमेशा डाउनलोड लिंक पर एक लक्ष्य = "_ blank" जोड़ता हूं। यह एक नई विंडो खोलेगा, लेकिन जैसे ही उपयोगकर्ता क्लिक करता है, नई विंडो बंद हो जाती है।

Comments

यह सबसे अच्छा जवाब है। Internet Explorer में, '' target = "_ blank" 'को एक लिंक से जोड़ना है, जिसे डाउनलोड करना है, ब्राउज़र को दूर नेविगेट करने से रोकें (जहां "HTML1300: नेविगेशन हुआ" मुद्रित है), और इस तरह पृष्ठ को असंगत स्थिति में छोड़ सकते हैं।

— user64141

Answer 4

इसे HTML हेड सेक्शन urlमें डालें, डाउनलोड किए जाने वाले फ़ाइल के URL के लिए संस्करण सेट करें :

<script type="text/javascript">  
function startDownload()  
{  
     var url='http://server/folder/file.ext';    
     window.open(url, 'Download');  
}  
</script>

फिर इसे शरीर में डालें, जो 5 सेकंड के बाद स्वचालित रूप से डाउनलोड शुरू कर देगा:

<script type="text/javascript">  
setTimeout('startDownload()', 5000); //starts download after 5 seconds  
</script> 

( यहां से ।)

Comments

यह काम नहीं करता है, क्योंकि IE6 में, यदि उपयोगकर्ता फ़ाइल को "सेव" पर क्लिक करता है, तो सेव हो जाता है, लेकिन पॉपअप खुला रहता है। यह स्वीकार्य नहीं है।

— मोर्यक

यह कोड सफारी में काम नहीं कर रहा है क्या आप मुझे सफारी में हल करने में मदद कर सकते हैं।

— रेनिश खुंट

Answer 5

मुझे पता है कि सवाल पूछा गया था, 7 years and 9 months agoलेकिन कई पोस्ट किए गए समाधान काम नहीं करते हैं, उदाहरण के लिए <iframe>केवल साथ FireFoxकाम करता है और साथ काम नहीं करता है Chrome।

सबसे अच्छा उपाय:

किसी फ़ाइल डाउनलोड को खोलने के लिए सबसे अच्छा काम करने वाला समाधान लिंक तत्व JavaScriptका उपयोग करना HTMLहै, जिससे लिंक के तत्व कोdocument.body अन्य उत्तरों में बताए अनुसार जोड़ने की कोई आवश्यकता नहीं है।

आप निम्न फ़ंक्शन का उपयोग कर सकते हैं:

function downloadFile(filePath){
    var link=document.createElement('a');
    link.href = filePath;
    link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
    link.click();
}

अपने आवेदन में, मैं इसे इस तरह उपयोग कर रहा हूं:

downloadFile('report/xls/myCustomReport.xlsx');

काम कर रहे डेमो:

function downloadFile(filePath) {
  var link = document.createElement('a');
  link.href = filePath;
  link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
  link.click();
}

downloadFile("http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf");

ध्यान दें:

• आपको link.downloadविशेषता का उपयोग करना होगा इसलिए ब्राउज़र एक नए टैब में फ़ाइल नहीं खोलता है और डाउनलोड पॉप-अप फायर करता है।
• यह कई फ़ाइल प्रकारों (docx, xlsx, png, pdf, ...) के साथ परीक्षण किया गया था।

Comments

फ़ाइल को डाउनलोड करने तक लोडिंग जिफ़ को प्रदर्शित करने का सबसे अच्छा तरीका क्या होगा?

— Ctrl_Alt_Defeat

@Ctrl_Alt_Defeat खैर इस मामले में यह डाउनलोड की प्रक्रिया पर नज़र रखने के आसान नहीं होगा, लेकिन एक चाल पर इस gif एनीमेशन दिखाने के लिए किया जा सकता है linkक्लिक करें और एक समय समाप्ति के बाद इसे छुपाने के लिए, इस कोड का उपयोग: link.onclick = function() { document.body.innerText = "The file is being downloaded ..."; setTimeout(function() { document.body.innerText = ""; }, 2000); }, आप यह काम कर रहा देख सकते हैं में इस फिडेल , लेकिन ध्यान रखें कि यह करने के लिए अनुशंसित तरीका नहीं है, यह बेहतर होगा यदि हम उपयोग कर रहे हैं Ajax।

— cck14dk

यह फ़ायरफ़ॉक्स में काम नहीं करता है। फ़ायरफ़ॉक्स में कैसे डाउनलोड करें?

— मनोज राणा

@ManojRana फ़ायरफ़ॉक्स के लिए, आप इस उत्तर कोiframe देख सकते हैं ।

— cck13dk

यह समाधान मेरे लिए Chrome, Safari और Firefox में काम करता है :)

— ariebear

Answer 6

मैं एक फ़ाइल के डाउनलोड को आरंभ करने के लिए जावास्क्रिप्ट का उपयोग करने के लिए एक अच्छे तरीके की तलाश कर रहा हूं, जैसा कि यह सवाल बताता है। हालाँकि ये उत्तर सहायक नहीं थे। मैंने तब कुछ xbrowser परीक्षण किया और पाया कि एक iframe सभी आधुनिक ब्राउज़रों IE> 8 पर सबसे अच्छा काम करता है।

downloadUrl = "http://example.com/download/file.zip";
var downloadFrame = document.createElement("iframe"); 
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText"); 
document.body.appendChild(downloadFrame); 

class="screenReaderText" शैली के लिए मेरी कक्षा ऐसी सामग्री है जो मौजूद है लेकिन देखने योग्य नहीं है।

सीएसएस:

.screenReaderText { 
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
}

html5boilerplate में समान रूप से।

मैं इसे javascript window.open मेथड के लिए पसंद करता हूं क्योंकि यदि लिंक को तोड़ा जाता है तो iframe मेथड कुछ भी नहीं करता है क्योंकि एक खाली पेज पर रीडायरेक्ट करने का विरोध करते हुए कहा जाता है कि फाइल को खोला नहीं जा सकता।

window.open(downloadUrl, 'download_window', 'toolbar=0,location=no,directories=0,status=0,scrollbars=0,resizeable=0,width=1,height=1,top=0,left=0');
window.focus();

Answer 7

HTML5 ब्लॉब ऑब्जेक्ट-URL फ़ाइल API का उपयोग करना :

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see /programming/49988202/macos-webview-download-a-html5-blob-file
 * @param fileName String
 * @param fileContents String JSON String
 * @author Loreto Parisi
*/
var saveBlobAsFile = function(fileName,fileContents) {
    if(typeof(Blob)!='undefined') { // using Blob
        var textFileAsBlob = new Blob([fileContents], { type: 'text/plain' });
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        }
        else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else {
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
}//saveBlobAsFile

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see /programming/49988202/macos-webview-download-a-html5-blob-file
 * @param fileName String
 * @param fileContents String JSON String
 * @author Loreto Parisi
 */
var saveBlobAsFile = function(fileName, fileContents) {
  if (typeof(Blob) != 'undefined') { // using Blob
    var textFileAsBlob = new Blob([fileContents], {
      type: 'text/plain'
    });
    var downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    if (window.webkitURL != null) {
      downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
      downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
      downloadLink.onclick = document.body.removeChild(event.target);
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
    }
    downloadLink.click();
  } else {
    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.onclick = document.body.removeChild(event.target);
    pp.click();
  }
} //saveBlobAsFile

var jsonObject = {
  "name": "John",
  "age": 31,
  "city": "New York"
};
var fileContents = JSON.stringify(jsonObject, null, 2);
var fileName = "data.json";

saveBlobAsFile(fileName, fileContents)

Comments

मुझे लगता है कि यह करने का सबसे अच्छा तरीका है !!

— कुशाल एमके

यह कॉल करने के लिए भी एक अच्छा अभ्यास है URL.revokeObjectURL(url), जब फ़ाइल को मेमोरी को खाली करने की आवश्यकता नहीं है

— स्लीपवॉकर

Answer 8

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

एचटीएमएल

<input type="button" onclick="downloadButtonClicked()" value="Download"/>
...
...
...
<iframe style="display:none;" name="hiddenIframe" id="hiddenIframe"></iframe>

जावास्क्रिप्ट

function downloadButtonClicked() {
    // Simulate a link click
    var url = 'your_download_url_here';
    var elem = document.createElement('a');
    elem.href = url;
    elem.target = 'hiddenIframe';
    elem.click();
}

Answer 9

यदि लिंक एक मान्य फ़ाइल url के लिए है, तो बस window.location.href असाइन करना काम करेगा।

हालांकि, कभी-कभी लिंक मान्य नहीं होता है, और iFrame की आवश्यकता होती है।

विंडो को खोलने से रोकने के लिए अपना सामान्य ईवेंट करें ।preventDefault, और यदि आप jQuery का उपयोग कर रहे हैं, तो यह काम करेगा:

$('<iframe>').attr('src', downloadThing.attr('href')).appendTo('body').on("load", function() {
   $(this).remove();
});

Answer 10

घंटों की कोशिश के बाद, फ़ंक्शन का जन्म होता है :) मेरे पास एक परिदृश्य था जहां मुझे समय में लोडर प्रदर्शित करना था जबकि फ़ाइल डाउनलोड करने की तैयारी कर रही है:

क्रोम, सफारी और फ़ायरफ़ॉक्स में काम करना

function ajaxDownload(url, filename = 'file', method = 'get', data = {}, callbackSuccess = () => {}, callbackFail = () => {}) {
    $.ajax({
        url: url,
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            // create link element
            let a = document.createElement('a'), 
                url = window.URL.createObjectURL(data);

            // initialize 
            a.href = url;
            a.download = filename;

            // append element to the body, 
            // a must, due to Firefox
            document.body.appendChild(a);

            // trigger download
            a.click();

            // delay a bit deletion of the element
            setTimeout(function(){
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            }, 100);

            // invoke callback if any 
            callbackSuccess(data);
        },
        error: function (err) {
            // invoke fail callback if any
            callbackFail(err)
        }
    });

Answer 11

कैसा रहेगा:

<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">

यह तरीका सभी ब्राउज़रों पर काम करता है (मुझे लगता है) और आपको एक संदेश देता है जैसे: "यदि डाउनलोड पांच सेकंड में शुरू नहीं होता है, तो यहां क्लिक करें।"

यदि आप की जरूरत है यह जावास्क्रिप्ट के साथ .. अच्छी तरह से ...

document.write('<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">');

सादर

Answer 12

एक छोटा / छिपा हुआ iframe इस उद्देश्य के लिए काम कर सकता है।

इस तरह से आपको पॉप अप बंद करने के बारे में चिंता करने की ज़रूरत नहीं है।