मैं HTML में डाउनलोड लिंक कैसे बना सकता हूं?


224

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


11
इस प्रश्न के लिए स्वीकार चिह्न स्विच किया जाना चाहिए।
पक्के डेका

जवाबों:


163

यह उत्तर पुराना है। अब हमारे पास downloadविशेषता है । ( एमडीएन से यह लिंक भी देखें )

यदि "डाउनलोड लिंक" से आपका मतलब फ़ाइल को डाउनलोड करने, उपयोग करने के लिए लिंक से है

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

, target=_blankडाउनलोड शुरू होने से पहले एक नई ब्राउज़र विंडो प्रदर्शित करेगा। वह विंडो आमतौर पर बंद हो जाएगी जब ब्राउज़र को पता चलता है कि संसाधन एक फ़ाइल डाउनलोड है।

ध्यान दें कि ब्राउज़र को ज्ञात फ़ाइल प्रकार (जैसे JPG या GIF छवियां) आमतौर पर ब्राउज़र के भीतर खोले जाएंगे।

आप सही हेडर भेजने की कोशिश कर सकते हैं जैसे कि यहां उल्लिखित डाउनलोड को मजबूर करने के लिए । (सर्वर साइड स्क्रिप्टिंग या उसके लिए सर्वर सेटिंग्स तक पहुँच आवश्यक है।)


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

2
कृपया "लक्ष्य = '_ रिक्त' को छोड़ दें, क्योंकि यह IE में काम नहीं करेगा। क्या आपने इसका परीक्षण भी किया?
तारा

4
@Dudeson कृपया निर्दिष्ट करें कि "क्या काम नहीं करेगा" और IE के कौन से संस्करण (ओं) के बारे में आप बात कर रहे हैं। (अब यह सुरक्षित दृष्टिकोण नीचे TIIUNDER के और अधिक हाल ही में इस सवाल का जवाब वर्णित उपयोग करने के लिए है, हालांकि यह निशान स्वीकार मिलना चाहिए।।)
पेका

2
@ शेरगी का जवाब सात साल पुराना है। मैं इसे हटा नहीं सकता, और पूछने वाले ने स्वीकार चिह्न को स्विच करने के मेरे अनुरोध का जवाब नहीं दिया ... हम कुछ भी नहीं कर सकते, हालांकि मैं और अधिक वर्तमान उत्तर के लिए एक लिंक
Pekka

1
@ दानी TIIUNDER का जवाब नीचे देखें, जो अब सही है।
पेका

455

HTML5 का समर्थन करने वाले आधुनिक ब्राउज़रों में, निम्नलिखित संभव है:

<a href="link/to/your/download/file" download>Download link</a>

आप इसका उपयोग भी कर सकते हैं:

<a href="link/to/your/download/file" download="filename">Download link</a>

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


मैंने पीएफडी फ़ाइल डाउनलोड करने के लिए एक ही कोड का उपयोग किया है और मैंने सभी ब्राउज़र में परीक्षण किया है, सभी समर्थन कर रहे हैं, लेकिन सफारी में यह कोड नए टैब में खुले पीडीएफ फ़ाइल को डाउनलोड करने के बजाय सफारी पर काम नहीं कर रहा है।
रीनिश खुंट

6
caniuse.com/#search=download%20attribute Chrome, Edge, Firefox, Opera और नवीनतम Android 4.4+ ब्राउज़र में काम करता है, और इंटरनेट एक्सप्लोरर और सफारी में नहीं।
बार्ट वेकोइजेन

यदि मैं एक बटन क्लिक पर गतिशील रूप से लिंक बना रहा हूं तो मैं यह कैसे करूं?
नोंगथोंबाम तोर्तोइ

1
@NongthonbamTonthoi कठबोली आप जावास्क्रिप्ट का उपयोग गतिशील रूप से एक टैग को href प्रदान करने के लिए करते हैं
अक्षय किशोर

1
यह आवश्यक रूप से काम करने वाला नहीं है, क्योंकि यह समान-मूल URL तक सीमित है।
नाथन

22

एचटीएमएल 5 की <a downloadविशेषता के अलावा (या प्रतिस्थापन में) पहले से ही उल्लेख किया गया है,
ब्राउज़र की डिस्क डिस्क डाउनलोड को निम्न http प्रतिक्रिया हेडर द्वारा भी ट्रिगर किया जा सकता है:

Content-Disposition: attachment; filename=ProposedFileName.txt;

यह HTML5 से पहले करने का तरीका था (और अभी भी HTML5 का समर्थन करने वाले ब्राउज़रों के साथ काम करता है)।


4
लेकिन इसके लिए सर्वर साइड कार्यान्वयन की आवश्यकता है, सही है?
लोम्बास

@Lombas हाँ, केवल सर्वर http प्रतिक्रिया हेडर सेट कर सकता है।
मायोबिस

क्या यह पूरा जवाब है? आपको सामग्री प्रकार हेडर भेजने और डाउनलोड को बाध्य करने के लिए फ़ाइल पढ़ने की भी आवश्यकता है। आपके उत्तर के लिए और वह चाहते हैं। यहाँ पूर्ण जवाब: stackoverflow.com/a/1465631/2757916
गोविंद राय

यह सर्वर साइड कार्यान्वयन के लिए एकदम सही है, बस सटीक भी सामग्री प्रकार। यह downloadविशेषता की तुलना में अच्छी तरह से समर्थित है
william.eyidi

9

डाउनलोड लिंक उस संसाधन का लिंक होगा जिसे आप डाउनलोड करना चाहते हैं। इसका निर्माण उसी तरह से किया गया है जैसे कोई अन्य लिंक होगा:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

8

फ़ाइल से लिंक करने के लिए, किसी अन्य पेज लिंक की तरह ही करें:

<a href="...">link text</a>

चीजों को डाउनलोड करने के लिए मजबूर करने के लिए भले ही उनके पास एक एम्बेडेड प्लगइन हो (Windows + QuickTime = ugh), आप इसे अपने htaccess / apache2.conf में उपयोग कर सकते हैं:

AddType application/octet-stream EXTENSION

धन्यवाद! यह बहुत सरल है और सर्वर-वाइड है! : DI ने इस लिंक को पाया जो थोड़ा और विस्तृत है। धन्यवाद। htaccess-guide.com/adding-mime-types
जो डीएफ

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

4

यह धागा शायद अब तक प्राचीन है, लेकिन यह मेरी स्थानीय फ़ाइल के लिए html5 में काम करता है।

Pdfs के लिए:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

यह एक नई विंडो में पीडीएफ को खोलना चाहिए और आपको इसे डाउनलोड करने की अनुमति दे सकता है (कम से कम फ़ायरफ़ॉक्स में)। किसी भी अन्य फ़ाइल के लिए, बस इसे फ़ाइल नाम दें। छवियों और संगीत के लिए, आप उन्हें अपनी साइट के समान निर्देशिका में संग्रहीत करना चाहेंगे। तो यह होगा

<p><a href="images/logo2.png" download>test pdf</a></p>

2

डाउनलोड विशेषता IE में काम नहीं करता है, यह "डाउनलोड" को पूरी तरह से अनदेखा करता है। यदि कोई दूरस्थ साइट पर href इंगित करता है, तो डाउनलोड फ़ायरफ़ॉक्स पर काम नहीं करता है। इसलिए ओडिन का उदाहरण फ़ायरफ़ॉक्स 41.0.2 पर काम नहीं करता है।


1

यहां एक और सूक्ष्मता है जो यहां मदद कर सकती है।

मैं ऐसे लिंक रखना चाहता हूं जो दोनों को ब्राउज़र में खेलने और डिस्प्ले के साथ-साथ पूरी तरह से डाउनलोड करने की अनुमति दें। नई डाउनलोड विशेषता ठीक है, लेकिन हर समय काम नहीं करती क्योंकि ब्राउज़र की फ़ाइल को चलाने या प्रदर्शित करने की मजबूरी अभी भी बहुत मजबूत है।

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

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

मैं अंत में सिर्फ एक डमी क्वेरी फेंकने की उम्मीद कर रहा था या अन्यथा विस्तार को बाधित करने से काम चलेगा, लेकिन दुख की बात है कि ऐसा नहीं है।


0

<a>एचटीएमएल 5 में टैग के लिए डाउनलोड विशेषता नया है

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
या
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

मैं किसी भी विस्तार के संबंध में पहले वाले को पसंद करता हूं।


0

आप विभिन्न तरीकों से डाउनलोड कर सकते हैं आप मेरे रास्ते का अनुसरण कर सकते हैं। हालाँकि फ़ाइलें 'अनुमति-पॉपअप' की अनुमति के कारण डाउनलोड नहीं हो सकती हैं, लेकिन आपके वातावरण में, यह पूरी तरह से काम करेगी

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

'एक्स-फ्रेम-ऑप्शंस' से 'एओरिजिन' के कारण यह एक और एक भी विफल हो जाएगा।

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>


-3

ऐशे ही

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

तो एक फ़ाइल name.jpg एक साइट example.com पर इस तरह दिखेगा

<a href="www.example.com/name.jpg">Image</a>

उत्तरार्द्ध के साथ समस्या यह है कि यह ब्राउज़र में खुलेगा, डाउनलोड करने और सहेजने के लिए पेश नहीं किया जाएगा।
पक्का P

9
काम नहीं करेगा; ब्राउज़र इसे एक रिश्तेदार लिंक के रूप में मानेगा ./www.example.com/name.jpg- आपको http://निर्दिष्ट डोमेन के साथ पूर्ण लिंक के लिए उपयोग करना चाहिए ।
डेलन अजाबनी

-7

मुझे पता है कि मुझे देर हो गई है लेकिन यह वही है जो मुझे 1 घंटे की खोज के बाद मिला है

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

और डाउनलोड करने योग्य लिंक के लिए मैंने ऐसा किया

<a href="index.php?file=file.pdf">Download PDF</a>

6
यह भयानक है। जब मुझे ऐसा कोई डाउनलोड लिंक दिखाई देता है, तो मुझे index.php की कोशिश करने के लिए आग्रह करना पड़ता है; फ़ाइल = index.php जो आपके कोड की कॉपी / पेस्ट कार्यान्वयन में अंततः एक दुर्भावनापूर्ण व्यक्ति को आपके डेटाबेस तक पहुंच प्रदान करेगा और जो जानता है।
M.Stramm

1
बुरा विचार। पहला, क्योंकि आप अपने सर्वर को जरूरत से ज्यादा काम कर रहे हैं। दूसरा, क्योंकि उपयोगकर्ता किसी भी फाइल को डाउनलोड कर सकते हैं: p
जोस नेटो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.