(HTML) क्लिक करने पर उन्हें ब्राउज़र में खोलने के बजाय एक पीडीएफ फाइल डाउनलोड करें

115

मैं सोच रहा था कि उन्हें ब्राउज़र में खोलने के बजाय पीडीएफ फाइल लिंक को डाउनलोड करने योग्य कैसे बनाया जाए? यह html में कैसे किया जाता है? (मुझे लगता है कि यह जावास्क्रिप्ट या कुछ और के माध्यम से किया जाता है)।

javascript html

— 404Error
स्रोत

3

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

— बार्ट

1

HTML5 के अनुसार, ओपी को सरीम के उत्तर के सही उत्तर को अपडेट करना चाहिए।

— उमर तारिक

फोर्स के

— Ciro Santilli 病 open open open 法轮功

इस सवाल का जवाब यहाँ भी दिया गया है: stackoverflow.com/a/30714824/847235

— intrepidis

38

आप HTML के साथ ऐसा नहीं कर सकते। यह एक सर्वर-आधारित समाधान है। आपको फ़ाइल को स्ट्रीम करना होगा ताकि ब्राउजर सेव डायल को ट्रिगर कर सके।

मैं यह नहीं करने की सलाह दूंगा। कैसे एक उपयोगकर्ता पीडीएफ के साथ बातचीत उपयोगकर्ता को छोड़ दिया जाना चाहिए।

अद्यतन (2014):

तो ... इस जवाब को अभी भी बहुत सारे डाउनवोट मिलते हैं। मुझे लगता है कि इसका मतलब यह है कि यह 4 साल पहले उत्तर दिया गया था और जैसा कि सरिम बताते हैं, अब HTML 5 downloadविशेषता है जो इसे संभाल सकती है।

मैं सहमत हूं, और लगता है कि सरीम का उत्तर अच्छा है (यह शायद चुना हुआ उत्तर होना चाहिए अगर ओपी कभी वापस लौटता है)। हालाँकि, यह उत्तर अभी भी इसे संभालने का विश्वसनीय तरीका है (जैसा कि यिशिट यनर का उत्तर बताता है और - अजीब तरह से - लोग इससे सहमत हैं)। जबकि डाउनलोड विशेषता को समर्थन प्राप्त हुआ है, यह अभी भी धब्बेदार है:

http://caniuse.com/#feat=download

— महंगाई भत्ते।
स्रोत

18

मुझे पता है कि यह एक साल पुराना है - लेकिन मैं असहमत हूं। ऐसी परिस्थितियां हैं जिनके तहत आवेदन के प्रवाह के लिए इस व्यवहार को मजबूर करना बहुत महत्वपूर्ण है। वास्तविक उत्तर "इनलाइन" के बजाय हेडर में सामग्री-विवाद को "अनुलग्नक" के रूप में सेट करना है।

— user158017

9

मैं इस बात से सहमत हूं कि अन्य परिस्थितियों में, इसे उपयोगकर्ता नियंत्रण तक छोड़ना बेहतर है। हालाँकि, मैं एक जवाब की तलाश में इस थ्रेड पर आया था, और चेक किया गया "उत्तर 'एक उत्तर नहीं था - यह" आप ऐसा नहीं करना चाहिए। "मेरे लिए, यह सवाल का जवाब नहीं है। इसके बजाय, एक दें। विशिष्ट उत्तर और सलाह भी।

— 1415

1

कभी-कभी प्रश्न गलत होता है। ;) वैसे भी, आपके मुद्दे के बारे में, यह सब एक UX समस्या है। वेब को विशिष्ट तरीकों से व्यवहार करने के लिए मजबूर करना कभी-कभी आवश्यक होता है, लेकिन अक्सर एक यूएक्स परिप्रेक्ष्य से बेहतर समाधान होते हैं। साथ ही, मेरा उत्तर सही है। आप वह नहीं कर सकते जो आप HTML के साथ करना चाहते हैं (जो सवाल पूछ रहा था)। यह सर्वर-साइड समाधान के रूप में है।

— डीए।

1

यह मेरे अजीब जवाबों में से एक है जो कभी भी पोस्ट किया गया है। लोग अभी भी इसे ढहाने के लिए यहां अपना रास्ता ढूंढते हैं। जो ठीक है! लेकिन यह जानना दिलचस्प होगा कि क्यों।

— डीए।

3

उस नीचता के बारे में, यह सभ्यता का पतन हो सकता है कि पाठ में अनजाने में अभिमानी होना कितना आसान है । यह जवाब मुझे लंबे समय तक राय देने और जवाबों पर कम करने के लिए कहता है। पैराग्राफ 1 के बजाय, httpप्रश्न में केवल टैग जोड़ें । पैराग्राफ 2 के बजाय: "आप पुनर्विचार करना चाह सकते हैं कि क्या तत्काल पीडीएफ देखने को रोकना सभी उपयोगकर्ताओं के सर्वोत्तम हित में है। कहा जा रहा है कि ..." फिर मान लें कि ओपी और भविष्य के पाठक वयस्क हैं और एक्शन के जवाब में आगे बढ़ें जैसे कि येनर ।

— बॉब स्टीन

133

Html5 के साथ, यह अब संभव है। तत्व में एक "डाउनलोड" attr सेट करें।

<a href="http://link/to/file" download="FileName">Download it!</a>

स्रोत: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

— सरीम
स्रोत

यदि आप इसका समर्थन करते हैं तो आप बेहतर समाधान के साथ चलते हैं। यह जाँचने का एक तरीका है कि क्या यह हैif ("download" in document.createElement("a")){ ... }

— दोपहर 12:30

मैंने नीचे एक और उत्तर जोड़ा (हालांकि खराब हैक), जबकि यह अभी भी पसंदीदा तरीका है, शायद हैक रास्ता असमर्थित ब्राउज़रों के लिए पेश किया जा सकता है।

— सरीम

क्या कोई ऐसा तरीका है जो फ़ाइल पथ का उल्लेख करने के बजाय पीडीएफ के लिए पाठ निर्दिष्ट कर सकता है? मुझे एक div html से पीडीएफ़ बनाने की आवश्यकता है लेकिन मैं एक और विंडो नहीं खोलना चाहता, डाउनलोड इस उत्तर की तरह

— प्रतीत

1

अभी अगस्त 2019 तक, इस सुविधा के लिए ब्राउज़र समर्थन बढ़ाया जा रहा है, देखें: w3schools.com/tags/att_a_download.asp

— डैनियल रेस

2

ध्यान दें कि डाउनलोड विशेषता केवल उसी-मूल अनुरोधों के लिए समर्थित है।

— क्वेंटिन

82

यह सर्वर साइड कोड द्वारा http प्रतिक्रिया हेडर सेट करने के साथ ही संभव है। अर्थात्;

Content-Disposition: attachment; filename=fname.ext

— यय यित येन
स्रोत

2

यह सही जवाब है - बस इसे उपयुक्त सर्वर-साइड भाषा में करने का तरीका ढूंढें।

— user158017

अपाचे उदाहरण। फ्लास्क उदाहरण।

— बॉब स्टीन

दुर्भाग्य से iOS अभी भी पीडीएफ फाइलों को पूर्वावलोकन करेगा और डाउनलोड नहीं करेगा भले ही सामग्री स्वभाव 'लगाव' हो।

— Jorn van de Beek

14

आपको भेजे गए http हेडर को बदलने की आवश्यकता है। आपके सर्वर के आधार पर, आप अपने .htaccess को निम्नानुसार संशोधित कर सकते हैं:

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

— php लड़का
स्रोत

सामग्री प्रकार के बारे में झूठ बोलने की कोई आवश्यकता नहीं है। सामग्री-वितरण सेट करना पर्याप्त है।

— क्वेंटिन

9

आपको PHP स्क्रिप्ट (या इसके लिए अन्य सर्वर साइड भाषा) का उपयोग करना होगा

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

और पीडीएफ के बजाय PHP फ़ाइल में रीडायरेक्ट (पुनर्लेखन) के लिए पुन: उपयोग करें

— beardhatcode
स्रोत

हम्म, यह बहुत अच्छा काम करता है जब मैं सीधे php फ़ाइल खोलता हूं। लेकिन जब मैं यहां पुनर्निर्देशन का उपयोग करने की कोशिश करता हूं, जैसे: रीडायरेक्ट 301 /_PDFs/Catalogue.pdf http://www.example.com/_PDFs/___download_the_catalogue_instead_opening.phpऔर पीडीएफ फाइल खोलने का प्रयास करें, यह अभी भी ब्राउज़र में मूल नाम खोलता है, बदले हुए संस्करण को डाउनलोड करने के लिए ...

— ellock

अद्यतन: यह काम करता है जब कोई फ़ाइल नहीं होती है जिसे सीधे कहा जाता है (जैसा कि मेरे उदाहरण में "कैटलॉग.पीएफडी")। तब पुनर्निर्देशन पूरी तरह से काम करता है। धन्यवाद!

— एलकेली

8

आप उपयोग कर सकते हैं

Response.AddHeader("Content-disposition", "attachment; filename=" + Name);

इस उदाहरण को देखें:

http://www.codeproject.com/KB/aspnet/textfile.aspx

यह ASP.NET के लिए जाता है। मुझे यकीन है कि आप अन्य सभी सर्वर साइड भाषाओं में समान समाधान पा सकते हैं। हालांकि मेरे ज्ञान के सर्वश्रेष्ठ के लिए कोई जावास्क्रिप्ट समाधान नहीं है।

— mihsathe
स्रोत

यह उत्तर है (साथ ही PHP के लिए संबंधित एक)। मुद्दा यह है कि http प्रतिक्रिया हैडर को संपादित करना होगा।

— user158017

5

HTML5 विशेषता के बिना php के उपयोग से कोई भी इसे प्राप्त कर सकता है:

इस कोड के साथ download.php नाम की php फाइल बनाएं :

<?php
ob_start();
$file = "yourPDF.pdf"

if (file_exists($file)) 
{
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit();
}

अब यदि आप स्वचालित रूप से पीडीएफ डाउनलोड करना शुरू करना चाहते हैं तो इस जावास्क्रिप्ट को लिखें:

<script>window.location = "download.php";</script>

यदि आप एक लिंक पर काम करना चाहते हैं, तो इसका उपयोग करें ...

<a href='javascript:window.location = "download.php"'>
    Download it!
</a>

— hlozancic
स्रोत

4

जब आप URL पैरामीटर के साथ ऐसा करने जा रहे हों, तो बस एक हेड अप आपको सावधान रहने की आवश्यकता है। उदाहरण के लिए $file = $_GET['$file'];। क्योंकि कोई तब download.php?file=../../../wp-config.phpकिसी दिए गए संसाधन को कॉल या कर सकता है । एक्सटेंशन, माइम-प्रकार और अनुमत पथों के लिए अतिरिक्त जाँच (और "../" जैसी सामग्री को अलग करने के लिए) बहुत महत्वपूर्ण हैं!

— गिएल बर्कर्स

क्या यह मुझे या <a href='javascript..'> ठीक वैसा ही है जैसे सीधे लिंक डालने में<a href='download.php'> ?

— allan.simon

5

जब आप किसी भी छवि या पीडीएफ फाइल को नए टैब में खोलने के बजाय ब्राउज़र से डायरेक्ट डाउनलोड करना चाहते हैं तो जावास्क्रिप्ट में आपको डायनामिक लिंक बनाने की विशेषता डाउनलोड करने के लिए मूल्य निर्धारित करना चाहिए

    var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    var event = document.createEvent('Event');
    event.initEvent('click', true, true); 
    save.dispatchEvent(event);
   (window.URL || window.webkitURL).revokeObjectURL(save.href);

नए Chrome अपडेट के लिए कुछ समय की घटना काम नहीं कर रही है। उसके लिए निम्नलिखित कोड का उपयोग किया जाएगा

  var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    document.body.appendChild(save);
    save.click();
    document.body.removeChild(save);

बच्चे को लागू करना और बच्चे को निकालना फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर ब्राउज़र के लिए ही उपयोगी है। क्रोम पर यह बच्चे को जोड़ने और हटाने के बिना काम करेगा

— प्रसाद जोशी
स्रोत

2

मेरे लिए सबसे अच्छा काम करने वाला समाधान निक ने अपने ब्लॉग पर लिखा था

उनके समाधान का मूल विचार अपाचे सर्वर हेडर मॉड का उपयोग करना है और एक फ़ाइलमेच निर्देश को शामिल करने के लिए .htaccess को संपादित करना है जो सभी * .pdf फ़ाइलों को अटैचमेंट के बजाय स्ट्रीम के रूप में कार्य करने के लिए निर्देशित करता है। हालांकि इसमें वास्तव में HTML संपादन (मूल प्रश्न के अनुसार) शामिल नहीं है, इसके लिए प्रति प्रोग्रामिंग की आवश्यकता नहीं है।

पहला कारण जो मैंने निक के दृष्टिकोण को पसंद किया, क्योंकि इसने मुझे इसे प्रति फ़ोल्डर के आधार पर सेट करने की अनुमति दी, इसलिए पीडीएफ को एक फ़ोल्डर में अभी भी ब्राउज़र में खोला जा सकता है, जबकि अन्य (जिन्हें हम उपयोगकर्ताओं को संपादित करना चाहते हैं और फिर पुनः अपलोड करेंगे) डाउनलोड के रूप में मजबूर होना।

मैं यह भी जोड़ना चाहूंगा कि पीडीएफ के साथ एक विकल्प है कि आप अपने सर्वर पर एपीआई के माध्यम से भरण-योग्य फॉर्म पोस्ट / सबमिट कर सकते हैं, लेकिन इसे लागू करने में कुछ समय लगता है।

दूसरा कारण था क्योंकि समय एक विचार है। हेडर में कंटेंट डिस्पोज़ को मजबूर करने के लिए PHP फ़ाइल हैंडलर लिखना () एपीआई की तुलना में कम समय लेगा, लेकिन निक के दृष्टिकोण से अधिक लंबा।

यदि आप जानते हैं कि अपाचे मॉड को कैसे चालू करें और .htaccs को संपादित करें तो आप इसे लगभग 10 मिनट में प्राप्त कर सकते हैं। इसके लिए लिनक्स होस्टिंग (विंडोज नहीं) की आवश्यकता है। यह सभी उपयोगों के लिए उपयुक्त दृष्टिकोण नहीं हो सकता है क्योंकि इसे कॉन्फ़िगर करने के लिए उच्च स्तरीय सर्वर पहुंच की आवश्यकता होती है। जैसे, यदि आपने कहा है कि यह संभवतः है क्योंकि आप पहले से ही जानते हैं कि उन दो चीजों को कैसे करना है। यदि नहीं, तो अधिक निर्देशों के लिए निक के ब्लॉग की जांच करें।

— Strixy
स्रोत

2

HTML5 तरीका (मेरा पिछला उत्तर) सभी ब्राउज़रों में उपलब्ध नहीं है, एक और थोड़ा हैक तरीका है।

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

पहले XMLHttpRequest (Ajax) के माध्यम से फ़ाइल की सामग्री डाउनलोड करें।
फिर फाइल के कंटेंट को बेस 64 एनकोड करके एक डेटा यूआरआई बनाएं और मीडिया-टाइप टू सेट करें application/octet-stream। परिणाम जैसा दिखना चाहिए

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

अब सेट करें location.href = data। यह ब्राउज़र को फ़ाइल डाउनलोड करने का कारण बनेगा। दुर्भाग्य से आप फ़ाइल का नाम या एक्सटेंशन इस तरह सेट नहीं कर सकते। मीडिया-प्रकार के साथ फिडिंग से कुछ मिल सकता है।

विवरण देखें: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

— सरीम
स्रोत

1

मुझे एक विशेष फ़ोल्डर में डायनामिक नामों के साथ बनाई गई फ़ाइलों के लिए ऐसा करने की आवश्यकता थी और आईआईएस द्वारा सेवा दी गई थी।

यह मेरे लिए काम किया:

IIS में, उस फ़ोल्डर पर जाएं और HTTP रिस्पांस हेडर्स पर डबल क्लिक करें।
निम्नलिखित जानकारी के साथ एक नया हेडर जोड़ें:

Name: content-disposition Value: attachment

(from: http://forums.iis.net/t/1175103.aspx?add+CustomHeaders+only+for+earch+file+types+ )

— EricL
स्रोत

1

यदि आप एचटीएमएल 5 का उपयोग कर रहे हैं (और मुझे लगता है कि अब हर कोई उस दिन का उपयोग करता है), एक विशेषता कहा जाता है download।

पूर्व। <a href="somepathto.pdf" download="filename">

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

— अक्षय
स्रोत

दुख की बात यह है कि मुझे यह स्वीकार करना पड़ा कि मैं इस टैग को समझने के लिए बहुत मूर्ख हूं। मैंने इसे रखा: <a href="download/Curriculum_it.pdf.zip">Download curriculum</a>या यह: <a href="download/Curriculum_it.pdf.zip" download="Curriculum_it">Download curriculum</a>और मैं यह कैसे काम करता है में कोई अंतर नहीं देख सकता। दोनों मेरे .zip को डाउनलोड कर रहे हैं। और दूसरे में फ़ाइल नाम विकल्प का उपयोग करने से कुछ भी नहीं लगता है।

— गरवानी

0

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

— अलेक्सी यृत्हिहो
स्रोत

0

आप download.js ( https://github.com/rndme/download और http://danml.com/download.html ) का उपयोग कर सकते हैं । यदि फ़ाइल बाहरी URL में है, तो आपको एक अजाक्स अनुरोध करना होगा, लेकिन यदि यह नहीं है, तो आप फ़ंक्शन का उपयोग कर सकते हैं:

download(Path, name, mime)

GitHub में अधिक जानकारी के लिए उनके प्रलेखन पढ़ें।

— विष्णु एस।
स्रोत

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

— एडवोलर

-1

अंत में मैंने पाया ...... डायनामिक एंकर टैग बनाएं और उस पर क्लिक करें

<script> 
   $('#myclick').click(function(){
       $('body').append('<a id="link" href="mypdf.pdf" 
        download="Payment.pdf">&nbsp;</a>');
       $('#link')[0].click();
   });
</script>

'Payment.pdf' केवल कस्टम नाम के लिए है।

— पुष्पेंद्र सिंह
स्रोत

गतिशील रूप से लिंक उत्पन्न करने की कोई आवश्यकता नहीं है।

— क्वेंटिन

ध्यान दें कि डाउनलोड विशेषता केवल उसी-मूल अनुरोधों के लिए समर्थित है।

— क्वेंटिन

यह रूप में एक ही जवाब हो रहा है यह एक तीन साल पहले से।

— क्वेंटिन