HTML बटन या जावास्क्रिप्ट पर क्लिक करते समय फ़ाइल डाउनलोड को कैसे ट्रिगर करें

Question

यह पागल है, लेकिन मुझे नहीं पता कि यह कैसे करना है, और क्योंकि शब्द कितने सामान्य हैं, यह खोजना मुश्किल है कि मुझे खोज इंजन पर क्या चाहिए। मैं सोच रहा हूं कि इसका जवाब देना आसान होना चाहिए।

मैं एक साधारण फ़ाइल डाउनलोड चाहता हूं, जो इस तरह से करेगा:

<a href="file.doc">Download!</a>

लेकिन मैं इनमें से किसी एक जैसे HTML बटन का उपयोग करना चाहता हूं:

<input type="button" value="Download!">
<button>Download!</button>

इसी तरह, क्या जावास्क्रिप्ट के माध्यम से एक सरल डाउनलोड को ट्रिगर करना संभव है?

$("#fileRequest").click(function(){ /* code to download? */ });

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

Comments

आपके लिए धन्यवाद "जावास्क्रिप्ट में एक फ़ाइल डाउनलोड को कैसे ट्रिगर किया जाए" भविष्य के किसी भी खोजकर्ता के लिए बहुत तेज़ी से उत्तर देगा।

— डेन्यूबियन नाविक

Answer 1

बटन के लिए आप कर सकते हैं

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Comments

आप फॉर्म टैग को सहेज सकते हैं और बटन टैग पर सिर्फ एक ऑंकलिक जोड़ सकते हैं।

— फ्लोरियन लेटेजब

ट्रिगर के रूप में काम नहीं करता है, बस यूआरएल को 'ए' टैग के रूप में रीडायरेक्ट करता है।

— fdrv

यह बेहतर काम करता है: <a href="path_to_file" download="proposed_file_name"> डाउनलोड </a>

— kscius

@ आज भी डाउनलोड विशेषता IE 11 में समर्थित नहीं है (यह अब एज में समर्थित है) और यह सफारी में समर्थित नहीं है। 2012 में जब उत्तर मूल रूप से पोस्ट किया गया था, तो यह किसी भी बड़े ब्राउज़र में समर्थित नहीं था।

— सीफ्रीक जूल

बटन स्टाइल के साथ एंकर होने और बटन के साथ फॉर्म होने में क्या अंतर है?

— आंद्रेई एप्योर

Answer 2

आप HTML5 downloadविशेषता के साथ डाउनलोड को ट्रिगर कर सकते हैं ।

<a href="path_to_file" download="proposed_file_name">Download</a>

कहाँ पे:

• path_to_fileएक पथ है जो URL पर URL के लिए हल होता है ही मूल । इसका मतलब है कि पृष्ठ और फ़ाइल को एक ही डोमेन, उपडोमेन, प्रोटोकॉल (HTTP बनाम HTTPS), और पोर्ट (यदि निर्दिष्ट हो) साझा करना होगा। अपवाद हैंblob:औरdata:(जो हमेशा काम करते हैं), औरfile:(जो कभी काम नहीं करते हैं)।
• proposed_file_nameबचाने के लिए फ़ाइल नाम है। यदि यह रिक्त है, तो ब्राउज़र फ़ाइल के नाम को डिफॉल्ट करता है।

प्रलेखन: एमडीएन , डाउनलोड करने पर HTML मानक , HTML मानक चालूdownload , CanIUse

Comments

सफारी और कुछ IE संस्करणों के साथ काम नहीं

— मोहम्मद हुसैन

के संयोजन का उपयोग करना downloadऔर target="_blank"अधिकांश उपयोग के मामलों को कवर करने के लिए पर्याप्त प्रतीत होता है। ब्राउज़र जो downloadइसे डाउनलोड के रूप में समझते हैं , अन्यथा यह एक नए टैब में खोला गया है।

— एमके १०

इसे केवल एक टैग के बजाय एक बटन ऑब्जेक्ट पर कैसे लागू किया जा सकता है ?

— तूफ़ान_एम २१३

वास्तव में यह केवल उसी मूल के यूआरएल के लिए काम करता है जैसा एमडीएन डॉक्स में उल्लिखित है। यदि हम एक सामान्य समाधान विकसित करना चाहते हैं तो यह बहुत बड़ी सीमा है

— अक्षत गुप्ता

प्रश्न स्पष्ट रूप से एक लिंक के बजाय एक बटन का उपयोग करने के लिए कह रहा है

— क्वेंटिन

Answer 3

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Comments

सबसे अच्छा और सबसे साफ समाधान। लेकिन आपको यहां किसी भी अतिरिक्त जावास्क्रिप्ट की आवश्यकता नहीं है। Onclick के साथ HTML हिस्सा पर्याप्त है।

— फ्लोरियन लेटेजब

क्या होगा अगर मैं एक xml फ़ाइल डाउनलोड करना चाहता हूँ?

— g07kore

आपके कोड के लिए धन्यवाद। मैंने परीक्षण किया है, यह IE, क्रोम, फ़ायरफ़ॉक्स में काम कर सकता है।

— मुथुकुमार

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

— विंडराइडर

window.open किसी ब्राउज़र में पॉपअप-ब्लॉकिंग को ट्रिगर कर सकता है और इस प्रकार अनुशंसित नहीं है। आप window.location = 'path' का उपयोग कर सकते हैं, हालांकि यह उसी ब्राउज़र विंडो में स्थान पर जाएगा।

— एलेंडुरवेन

Answer 4

JQuery के साथ:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Comments

बहुत बहुत धन्यवाद। क्या आपको पता है कि क्या अधिकांश सर्वर डिफ़ॉल्ट रूप से सामग्री-विवाद को 'अनुलग्नक' पर सेट करेंगे?

— ब्रेंटनस्ट्राइन

कोई "सबसे" नहीं है। यह पूरी तरह से निर्भर करता है। इस पर सेट होने पर भरोसा मत करो।

— मैट बॉल

यह मुद्दा मुझे बैलिस्टिक चला रहा है, और यह एकमात्र विकल्प था जिसने काम किया (और आईई द्वारा समर्थित है)। मैं मेरे जैसे किसी भी n00bs के लिए जोड़ूंगा कि सामग्री-विवाद सेट करने के लिए, आपको बस इतना करना है: -; php शीर्ष लेख ('सामग्री-विवाद: अनुलग्नक; फ़ाइल नाम = "फ़ाइल नाम।"); ?>

— user124384

कोई गुड़ नहीं। अवधि।

— एडम अरोल्ड

यदि आप एक छवि को डाउनलोड करने की कोशिश कर रहे हैं तो यह काम करता है, यह ब्राउज़र में छवि को खोलेगा

— धीरज

Answer 5

पुराना धागा लेकिन यह एक साधारण js समाधान याद आ रहा है:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

Comments

@NicholasKyriakides मुझे इस रत्न की याद दिलाता है: image.ibb.co/dtkUWJ/Selection_002.png

— स्टीफनोस चर्स

@BryanLarsen FF का कौन सा संस्करण है?

— स्टेफानोस चर्स

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

— स्टेफानोस चर्स

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

— मोहित बंसल

@mohitbansal (संयुक्त राष्ट्र) सौभाग्य से नहीं जैसा कि यह ब्राउज़र स्तर में है

— स्टीफनोस चर्स

Answer 6

आप इसे अदृश्य आइफ्रेम के साथ "ट्रिक" से कर सकते हैं। जब आप इसे "src" सेट करते हैं, तो ब्राउज़र प्रतिक्रिया करता है जैसे कि आप उसी "href" के साथ लिंक पर क्लिक करेंगे। प्रपत्र के साथ समाधान के विपरीत, यह आपको अतिरिक्त तर्क एम्बेड करने में सक्षम बनाता है, उदाहरण के लिए टाइमआउट के बाद डाउनलोड को सक्रिय करना, जब कुछ शर्तें पूरी होती हैं आदि।

यह बहुत ही शांत है, उपयोग करते समय कोई नई विंडो / टैब नहीं है window.open।

HTML:

<iframe id="invisible" style="display:none;"></iframe>

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

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Comments

यह कम से कम, यदि आप वास्तव में iframe को document.body से जोड़ते हैं।

— yxhuvud

यह अभी Chrome में काम नहीं कर रहा है, हालांकि यह काम करता था। मुझे आश्चर्य है कि अगर यह क्रोम के विभिन्न संस्करणों में रुक-रुक कर काम कर रहा है।

— डोबेस वांडरमेर

क्रोम में संस्करण 61.0.3163.100 (आधिकारिक बिल्ड) (64-बिट) के रूप में काम करता है

— एंड्रयूबैनजैम

फ़ायरफ़ॉक्स v57 में छवियों के साथ काम नहीं करता है। यह सिर्फ iframe में छवि प्रदान करता है।

— एंटनी

Answer 7

बूटस्ट्रैप संस्करण

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

बूटस्ट्रैप 4 डॉक्स में प्रलेखित , और बूटस्ट्रैप 3 में भी काम करता है।

Comments

बूटस्ट्रैप के साथ केवल यही एक चीज है जो क्लास के नाम है, यह सिर्फ HTML5 की शक्ति है।

— मचाडो

प्रश्न स्पष्ट रूप से पूछ रहा है कि लिंक के बजाय बटन के साथ ऐसा कैसे करें।

— क्वेंटिन

अगर आपको बूटस्ट्रैप के बारे में कुछ भी पता था, तो आप देखेंगे कि यह एक बटन है।

— जॉन लॉर्ड

Answer 8

मुझे लगता है कि यह वह उपाय है जिसकी आपको तलाश थी

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

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

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Comments

404 पर -> 404 त्रुटि पृष्ठ पर पृष्ठ परिवर्तन। अन्य location.hrefसमस्याओं पर भी यही समस्या है ।

— BananaAcid

Answer 9

व्हाट अबाउट:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Comments

यह काम नहीं करता है, यदि आपकी फ़ाइल, उदाहरण के लिए, एक छवि है, क्योंकि यह केवल ब्राउज़र में खोला जाएगा।

— रथ

एक अन्य समस्या यह है कि यदि फ़ाइल गायब है तो यह पूरे पृष्ठ को 404 पृष्ठ पर

— लाती है

Answer 10

आप डाउनलोड लिंक को छिपा सकते हैं और बटन को क्लिक कर सकते हैं।

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Comments

फ़ायरफ़ॉक्स में काम करने के लिए, संसाधन को दस्तावेज़ के समान डोमेन पर होना चाहिए। कोर हेडर सेट करने से मदद नहीं मिलती है।

— एंटनी

कभी ऐसा मत करो

— Wannes

@ क्यों नहीं?

— Starwarswii

Answer 11

यदि आपकी वेनिला जावास्क्रिप्ट (कोई jQuery) समाधान की तलाश में है और HTML5 विशेषता का उपयोग किए बिना आप यह कोशिश कर सकते हैं।

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

Answer 12

यह वही है जो आखिरकार मेरे लिए काम करता है क्योंकि डाउनलोड की जाने वाली फ़ाइल पेज लोड होने पर निर्धारित की गई थी।

प्रपत्र की क्रिया विशेषता को अद्यतन करने के लिए JS:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

प्रपत्र की क्रिया विशेषता को अद्यतन करने के लिए JS को कॉल करना:

<body onLoad="setFormAction();">

सबमिट बटन के साथ फॉर्म टैग:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

निम्नलिखित काम नहीं किया:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

Comments

शायद इसलिए कि अगर आपके पास लोड समय पर फ़ाइल है, तो क्या आप सर्वर पर टेंपलेटिंग इंजन का उपयोग करके कार्रवाई को प्रस्तुत नहीं कर सकते हैं? js कोड की आवश्यकता क्यों है?

— आंद्रेई एपीर

Answer 13

यदि आप फ़ॉर्म का उपयोग नहीं कर सकते हैं, तो डाउनलोड के साथ एक और दृष्टिकोण अच्छा है। Downloadjs हुड के नीचे बूँद और html 5 फ़ाइल एपीआई का उपयोग करते हैं:

{downloadjs (url, फ़ाइल नाम)}) />

* यह jsx / रिएक्ट सिंटैक्स है, लेकिन इसका उपयोग शुद्ध html में किया जा सकता है

Comments

अन्य डोमेन पर छवियों के लिए CORS समस्याओं से बचने के लिए, imor टैग में crossorigin = "अनाम" डालें, जैसे: <img src = "image.png" crossorigin = "गुमनाम" />

— जोनाथन हैरिस

Answer 14

आपके <body>और </body>टैग के बीच कहीं भी , नीचे दिए गए कोड का उपयोग करके एक बटन लगाएं:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

यह काम करने के लिए निश्चित है!

Comments

क्रोम के लिए यह एक महान समाधान है

— हेक अरामयान

सफारी में भी काम नहीं करता: W3 स्कूल

— एलेक्स '

एमएस ब्राउज़र में काम नहीं करना एक बड़ी समस्या है और क्रोम हमेशा इसका जवाब नहीं होने वाला है।

— सुदोकिद

आप HTML में एक बटन के अंदर कोई लिंक नहीं डाल सकते हैं

— Quentin

Answer 15

यदि आपके पास एक जटिल URL है तो ऐसा करने का दूसरा तरीका file.doc?foo=bar&jon=doeयह है कि फ़ॉर्म के अंदर छिपे हुए फ़ील्ड को जोड़ना है

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

@Cfreak उत्तर पर प्रेरित जो पूर्ण नहीं है

Answer 16

आप बिना किसी पाठ के लिंक के साथ टैग जोड़ सकते हैं। और जब आप कोड में बटन को क्लिक करते हैं, तो बस $ ("yourlinkclass") चलाएं। क्लिक करें () फ़ंक्शन।

Answer 17

डाउनलोड विशेषता यह करते हैं

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Comments

मुझे आपका उत्तर पसंद है

— जॉर्ज सी।

प्रश्न स्पष्ट रूप से पूछ रहा है कि लिंक के बजाय बटन के साथ ऐसा कैसे करें।

— क्वेंटिन

Answer 18

यदि आप <a>टैग का उपयोग करते हैं , तो संपूर्ण url का उपयोग करना न भूलें जो फ़ाइल की ओर जाता है - यानी:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Comments

मुझे नहीं लगता कि यहाँ यह समस्या है। यदि फ़ाइल के समान लिंक लिंक में है, तो भी "पूर्ण" पथ की आवश्यकता नहीं है।

— रॉकेट हज़रत

@Rocket - आप निश्चित रूप से, निरपेक्ष पथ के बारे में सही हैं, हालांकि, इसे सही करने के लिए निश्चित करना सबसे अच्छा तरीका है। मैं यह तय करने के लिए ओपी पर छोड़ दूंगा कि क्या यह मददगार था -

— मार्क

प्रश्न स्पष्ट रूप से पूछ रहा है कि लिंक के बजाय बटन के साथ ऐसा कैसे करें।

— क्वेंटिन

इस समाधान में डाउनलोड विशेषता गायब है। डाउनलोड विशेषताओं को जोड़ने के बाद भी यह क्रॉस-डोमेन के लिए काम नहीं करेगा।

— रों शरीफ

Answer 19

मेरे लिए एंकर टेक्स्ट के बजाय एडिंग बटन वास्तव में अच्छी तरह से काम करता है।

<a href="file.doc"><button>Download!</button></a>

यह अधिकांश नियमों से ठीक नहीं हो सकता है, लेकिन यह बहुत अच्छा लग रहा है।

Comments

यह केवल इसलिए काम करता है क्योंकि आपका ब्राउज़र .doc फ़ाइलों का समर्थन नहीं करता है।

— एड्रियन

आपका HTML अमान्य है। <a>तत्वों में <button>तत्व नहीं हो सकते हैं ।

— क्वेंटिन

हालांकि यह हमेशा ऐसा था? यह जवाब दो साल पुराना था जब आपने टिप्पणी की थी।

— जॉन लॉर्ड