Q

एचटीएमएल बटन या जावास्क्रिप्ट

2012-07-23 22 views 273 likes

273

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

मैं चाहता हूँ एक सरल फ़ाइल डाउनलोड, कि इस के रूप में ही करना होगा:

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

लेकिन मैं, उदाहरण के लिए एक HTML बटन का उपयोग करना चाहते इनमें से कोई भी:

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

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

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

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

स्रोत

2012-07-23 brentonstrine

+12

क्योंकि बाईबल का कहना है यह एक पाप है यह गलत है। ;) और क्योंकि मैं बस एक HTML बटन का उपयोग करना चाहता हूं, और मुझे कुछ नया सीखने से डर नहीं है। – brentonstrine

+4

डाउनवोट है क्योंकि मैं ' 'टैग का उपयोग नहीं करना चाहता था? – brentonstrine

+10

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

A

उत्तर

207

बटन के लिए आप

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

स्रोत

2012-07-23 21:26:19 Cfreak

+0

स्पष्ट और सही उत्तर, धन्यवाद। मुझे नहीं पता कि मैंने ऐसा क्यों नहीं किया। (माइनस सवाल का जावास्क्रिप्ट हिस्सा है, जो मैट गेंद जवाब दे दिया।) – brentonstrine

+4

तुम हमेशा एक लंगर में लपेट कर सकते हैं: से ऊपर नहीं मान्य एचटीएमएल 5 सकते हैं कि मैं घोंसला एक एचटीएमएल 5 का उपयोग कर के अंदर एक

+0

@JJP - हो सकता है कि आप उस प्रश्न को अलग से पूछना चाहें। इसमें जावास्क्रिप्ट को शामिल करना होगा और शायद प्रत्येक फ़ाइल को iframes में लोड करना होगा। – Cfreak

56

jQuery के साथ

:

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

स्रोत

2012-07-23 21:23:49

+1

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

+5

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

+2

यह मुद्दा मुझे बैलिस्टिक चला रहा है, और यह एकमात्र विकल्प था जो काम करता था (और आईई द्वारा समर्थित है)। मैं अपने जैसे किसी भी n00bs के लिए जोड़ दूंगा कि सामग्री-विस्थापन सेट करने के लिए, आपको बस इतना करना है: – user124384

-3

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

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

स्रोत

2012-07-23 21:27:52 Mark

+0

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

+0

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

-5

सीएसएस का उपयोग करके एक सामान्य लिंक का उपयोग करें और इसे बटन की तरह दिखने के लिए शैली बनाएं।

स्रोत

2012-07-23 21:28:44

+14

मैंने स्पष्ट रूप से कहा था कि मैं एक बटन की तरह दिखने वाला एंकर बनाना नहीं चाहता हूं। – brentonstrine

+0

पर्याप्त वर्णनात्मक नहीं है। यदि आप सुझाव देते हैं कि कुछ कोड को –

4

के बारे में क्या:

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

स्रोत

2013-07-22 03:23:04 olli

+0

को वापस करने के लिए कुछ कोड दिखाएं! सरल और काम किया –

+1

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

49

HTML:

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

स्रोत

2013-09-07 18:57:46 sleepyup

+8

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

+3

यदि मैं एक एक्सएमएल फ़ाइल डाउनलोड करना चाहता हूं तो क्या होगा? – g07kore

+4

यह आपके कोड के लिए क्रोम – slayernoah

301

मैं कुछ शोध किया और सर्वश्रेष्ठ उत्तर मिल गया है। आप नई एचटीएमएल 5 download विशेषता का उपयोग करके एक डाउनलोड ट्रिगर कर सकते हैं।

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

कहाँ:

path_to_file या तो एक पूर्ण या संबंधित पथ है,
proposed_file_name फ़ाइल नाम (वास्तविक फ़ाइल नाम करने के लिए, खाली हो सकता है तो चूक) को बचाने के लिए।

आशा है कि यह सहायक होगा।

Whatwg Documentation

स्रोत

2013-09-07 22:54:45

+20

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

+1

क्या समान कार्यक्षमता प्राप्त करने के लिए कोई जावास्क्रिप्ट काम करता है? शेष उत्तर, एक ही सुविधा को दोहराना नहीं है। वे या तो एक नई विंडो खोलते हैं या विभिन्न यूआरएल में स्थानांतरित करते हैं। –

+0

@AlexeyFShevelyov caniuse के लिए लिंक पहले से ही –

21

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

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

HTML:

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

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

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

स्रोत

2014-03-06 16:57:46

+0

विकसित करना चाहते हैं तो यह एक बड़ी सीमा है, यह क्रोम में काम नहीं कर रहा है? –

+0

यह कम से कम अगर आप वास्तव में document.body को iframe को मंजूरी देते हैं। – yxhuvud

+0

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

1

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

जे एस फ़ॉर्म की ऐसी गतिविधि विशेषता को अपडेट करने:

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

जे एस कॉलिंग फ़ॉर्म की ऐसी गतिविधि विशेषता को अपडेट करने:

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

: सबमिट बटन के साथ

<body onLoad="setFormAction();">

फ़ॉर्म टैग निम्नलिखित नहीं काम:

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

स्रोत

2015-11-19 23:01:15 slayernoah

+0

नीचे वोट क्यों? – slayernoah

+0

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

3

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

कहीं भी:

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

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

स्रोत

2016-05-25 17:12:04 Ronaldo

+2

यह आईई या एज में नहीं है ... –

+1

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

+1

सफारी में काम नहीं करता है: [डब्ल्यू 3 स्कूल] (http://www.w3schools.com/tags/att_a_download.asp) – Alex

1

<a href="complexDownload" download="file.doc" onclick="this.href='file.doc';"> 
    <button>Download <i>File.doc</i> Now!</button> 
</a>

यह सफारी में काम नहीं कर रहा है, लेकिन यह क्रोम में काम करता है। साथ ही, उपयोगकर्ता द्वारा क्लिक किए जाने के बाद लिंक की href विशेषता को बदलने से यह आईई के पुराने संस्करणों में काम करता है, लेकिन आईई या एज के नवीनतम संस्करणों में नहीं।

स्रोत

2016-11-25 23:53:34 IamGuest

+0

मैंने ओपेरा या आईई, एज, क्रोम के अलावा किसी भी ब्राउज़र में इसका परीक्षण नहीं किया। और सफारी अभी तक .... – IamGuest

1

मुझे लगता है कि इस समाधान आप के लिए

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

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

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

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

स्रोत

2017-03-22 19:28:34 Delconis

+0

नाइस;) ....... – Cody

3

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

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

स्रोत

2017-06-09 17:28:07 Starwarswii

+0

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

0

आप एक जटिल यूआरएल file.doc?foo=bar&jon=doe रूप में इस तरह की है मामले में ऐसा करने का एक और तरीका है प्रपत्र

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

@Cfreak जवाब पर प्रेरित जो

स्रोत

2017-06-22 10:21:26 Bellash

0

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

{downloadjs (यूआरएल, फ़ाइल नाम)}) />

* यह jsx/प्रतिक्रिया वाक्य रचना है, लेकिन शुद्ध एचटीएमएल

स्रोत

2017-08-07 12:55:13

-2

में इस्तेमाल किया जा सकता के लिए है: Downloadjs हुड के नीचे ब्लॉब और एचटीएमएल 5 फ़ाइल एपीआई का उपयोग एंकर पाठ के बजाय मुझे विज्ञापन बटन वास्तव में अच्छी तरह से काम करता है।

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

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

स्रोत

2017-08-27 06:08:34 Brana

+2

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

1

यदि आप एक वेनिला जावास्क्रिप्ट (कोई 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>

स्रोत

2018-02-05 21:38:20

संबंधित मुद्दे