क्लिक पर छवि फ़ाइलों को डाउनलोड करने के लिए फोर्स ब्राउज़र


100

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

केवल क्लाइंट-साइड प्रोग्रामिंग का उपयोग करके ऐसा करने का कोई तरीका है?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

    <script type="text/javascript">
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                var name = element.nameProp;
                var address = element.href;
                saveImageAs1(element.nameProp, element.href);
                return false; // Prevent default action and stop event propagation
            }
            else
                return true;
        };

        function saveImageAs1(name, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

एक्सेल शीट डाउनलोड करने के मामले में यह कैसे काम करना चाहिए (ब्राउज़र क्या करते हैं)?


7
downloadविशेषता।
20इमे विद

6
फ़ाइल डाउनलोड सुनिश्चित करने का सबसे अच्छा तरीका है कि सर्वरसाइड पर कंटेंट डिस्पोज को सेट किया जाए, ज्यादातर क्लाइंटसाइड सॉल्यूशंस उस भरोसेमंद नहीं हैं।
एडेनो


एक ऐसा ही सवाल है जो आपके लिए पहले से ही उत्तर दिया गया है: stackoverflow.com/a/6799284/1948211
dschu

कार्ल-आंद्रे गग्नन: कृपया इसे उचित रूप से समझें। [मैंने HTML 5 को टैग नहीं किया था क्योंकि मैं इसका उपयोग नहीं करना चाहता था] और w / o स्पर्श सर्वर
अमित

जवाबों:


172

HTML5 का उपयोग करके आप अपने लिंक में विशेषता 'डाउनलोड' जोड़ सकते हैं।

<a href="https://stackoverflow.com/path/to/image.png" download>

इसके बाद जटिल ब्राउज़र छवि को उसी फ़ाइल नाम से डाउनलोड करने के लिए संकेत देगा (इस उदाहरण में image.png)।

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

<a href="https://stackoverflow.com/path/to/image.png" download="AwesomeImage.png">

अद्यतन: वसंत 2018 के रूप में यह अब क्रॉस-ओरिजनल hrefएस के लिए संभव नहीं है । इसलिए यदि आप <a href="https://i.imgur.com/IskAzqA.jpg" download>imgur.com के अलावा किसी डोमेन पर बनाना चाहते हैं, तो यह उद्देश्य के अनुसार काम नहीं करेगा। क्रोम के अपव्यय और निष्कासन की घोषणा


रिचर्ड परनाबी-राजा: HTML 5 विशेषता का उपयोग करके इसे किया जा सकता है, लेकिन मुझे HTML5 या किसी भी सर्वर वीडियो उपकरण का उपयोग किए बिना इसे करने की आवश्यकता है (यदि ऐसा करना संभव है) सहायकों के लिए धन्यवाद :)
अमित

2
पूरी तरह से अभी तक सभी ब्राउज़रों में समर्थित नहीं है, लेकिन यह एक अच्छा समाधान है यदि आप IE या सफारी के बारे में परवाह नहीं करते हैं। caniuse.com/#feat=download
stacigh

HTML5 समाधान के लिए धन्यवाद। अब भी 'इस रूप में सहेजें' की अनुमति कैसे दें कि मुझे सहेजने से पहले एक फ़ाइल नाम दर्ज करें?
टेलीमैन

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

1
@ArjunChiddarwar नहीं, जो सुरक्षा कमजोरियों को खोलता है (किसी को दुर्भावनापूर्ण फ़ाइल को सीधे आपके विंडोज फ़ोल्डर में सहेजने की कल्पना करें)। डाउनलोड पथ ब्राउज़र सेटिंग्स पर आधारित है - उदाहरण के लिए डिफ़ॉल्ट रूप से क्रोम आपके डाउनलोड फ़ोल्डर में डाउनलोड होगा।
रिचर्ड पर्नाबी-किंग

96

मैंने दस्तावेज़ में लिंक जोड़कर क्रोम और फ़ायरफ़ॉक्स में भी यह काम पाने में कामयाबी हासिल की।

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

2
यह वास्तव में वेब-ऐप्स के लिए एक बहुत अच्छा समाधान है जहां जावास्क्रिप्ट सभी जगह है। केवल Google Chrome में (मेरे परीक्षण सेटअप में) काम करता है, हालाँकि।
पावेल

संगतता के लिए परीक्षण करने के तरीके पर कोई विचार? मैं इस तकनीक का उपयोग करना चाहता हूं, लेकिन अन्य ब्राउज़रों का भी समर्थन करने की आवश्यकता है, इसलिए जब यह समर्थित नहीं है, तो एक विकल्प (जैसे एक नई विंडो में पीडीएफ, या डाउनलोड करने के लिए लिंक) की पेशकश करने की आवश्यकता होगी। क्या किसी को भी इसके साथ कोई भाग्य था?
एलेक्स्रसेल

13
महान समाधान, धन्यवाद! ध्यान दें कि यदि आप छोड़ देते हैं तो document.body.appendChild(link)यह फ़ायरफ़ॉक्स में काम नहीं करेगा। इसके document.body.removeChild(link);बाद बनाए गए तत्व को निकालना भी अच्छा हैlink.click()
akn

8
सबसे अच्छा उपाय। डोम के उपयोग में कचरा से बचने के लिएsetTimeout( function () { link.parentNode.removeChild( link ); },10 );
मेफिज़ोफेल्स

1
धन्यवाद प्रश्न के बाद से चयनित उत्तर होना चाहिए था कि यह कैसे JAVASCRIPT में करना है।
कोडेलप 4

33

लेरॉय और रिचर्ड पर्नाबी-किंग:

अद्यतन: वसंत 2018 के रूप में यह क्रॉस-ओरिजनल हर्फ के लिए अब संभव नहीं है। इसलिए यदि आप imgur.com के अलावा किसी डोमेन पर बनाना चाहते हैं, तो यह उद्देश्य के अनुसार काम नहीं करेगा। क्रोम के अपव्यय और निष्कासन की घोषणा

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

2
छवि डाउनलोड लेकिन नहीं खुलती है क्योंकि यह कहा जाता है कि 'छवि टूट गई है'
picacode

19

अद्यतन वसंत 2018

<a href="/path/to/image.jpg" download="FileName.jpg">

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

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

लेरॉय और रिचर्ड पर्नाबी-किंग:

अद्यतन: वसंत 2018 के रूप में यह क्रॉस-ओरिजनल हर्फ के लिए अब संभव नहीं है। इसलिए यदि आप imgur.com के अलावा किसी डोमेन पर बनाना चाहते हैं, तो यह उद्देश्य के अनुसार काम नहीं करेगा। क्रोम के अपव्यय और निष्कासन की घोषणा

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


ऐसा लगता है कि यह कोड छवि को ब्राउज़र मेमोरी में पिक्सल्स के बफर में डिकोड करता है, फिर इसे jpeg / png / gif के रूप में रीकोड करता है और फिर उसे एक डेटा-यूरी में इनकैप्सुलेट करता है जो तब स्थानीय रूप से संग्रहीत होता है। यदि हां, तो इसका मतलब है कि छवि फ़ाइल से सभी मेटाडेटा खो गया है। इसके अलावा जेपीईजी पुन: लोड करने से कुछ गुणवत्ता खो जाएगी और खराब गुणवत्ता / बाइट-काउंट अनुपात होगा। फिर भी जानकर अच्छा लगा। साझा करने के लिए धन्यवाद।
स्टीफन गौरीचॉन

14

वादा और async / इंतजार का उपयोग कर एक और अधिक आधुनिक दृष्टिकोण:

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

फिर

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

यहाँ प्रलेखन प्राप्त करें: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


13
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     

5
सफारी ब्राउज़र डाउनलोड विशेषता का समर्थन नहीं करता
प्रणव लाबे

11

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

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <image id="img" src="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" />


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>


3
कृपया अपने उत्तर में एक संक्षिप्त विवरण जोड़ें, ताकि इसे पूछने वाले व्यक्ति के लिए प्रासंगिक बनाया जा सके
AGE

1
link.href = 'डेटा: एप्लिकेशन / ऑक्टेट-स्ट्रीम,' + एन्कोड्युरिकम्पोनेंट (पता) यह फ़ाइल को दूषित करता है और इसलिए इसे खोला नहीं जा सकता है, कैनु सुझाव देता है कि ऐसा क्यों है
OM

हाँ, यह उत्तर सबसे अच्छा होना चाहिए! मेरे लिए गायब हिस्सा "क्लीनयूएल" चीज थी, जो विकृत डेटा उत्पन्न कर रही थी और फ़ाइल को तोड़ रही थी।
इयूलियन पिंजरु

3

2020 में मैं छवि की स्थानीय प्रतिलिपि बनाने के लिए ब्लॉब का उपयोग करता हूं , जो ब्राउज़र एक फ़ाइल के रूप में डाउनलोड होगा। आप इस साइट पर इसका परीक्षण कर सकते हैं ।

यहां छवि विवरण दर्ज करें

(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);

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


0
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>

0

आप ज्यादा कोड के बिना एंकर टैग का उपयोग करके सीधे इस फ़ाइल को डाउनलोड कर सकते हैं ।
स्निपेट को कॉपी करें और अपने टेक्स्ट-एडिटर में पेस्ट करें और कोशिश करें ...!

<html>
<head>
</head>
<body>
   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>
</body>
</html>


2
कृपया अधिक विवरण जोड़ें, उदाहरण के लिए जहां इस कोड का उपयोग किया जा सकता है।
मैकीज एस।

-2

.Click () फ़ंक्शन और टैग का उपयोग करने के बारे में क्या?

(संपीड़ित संस्करण)

<a id="downloadtag" href="examplefolder/testfile.txt" hidden download></a>

<button onclick="document.getElementById('downloadtag').click()">Download</button>

अब आप इसे js से ट्रिगर कर सकते हैं। यह अन्य उदाहरणों, छवि और पाठ फ़ाइलों के रूप में भी नहीं खुलता है!

(js-function संस्करण)

function download(){
document.getElementById('downloadtag').click();
}
<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>


-5

मैने पाया कि

<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>

मेरे लिए काम नहीं किया। मुझे यकीन नहीं है कि क्यों।

मैंने पाया है कि आप इसमें शामिल कर सकते हैं ?download=true डाउनलोड करने के लिए अपने लिंक के अंत पैरामीटर । मुझे लगता है कि मैंने इस तकनीक का उपयोग Google ड्राइव द्वारा देखा जा रहा है।

अपने लिंक में, शामिल करें ?download=trueअपने href के अंत में शामिल करें।

आप इस तकनीक का उपयोग उसी समय फ़ाइल नाम सेट करने के लिए भी कर सकते हैं।

अपने लिंक में, ?download=true&filename=My_Image_File.jpegअपने href के अंत में शामिल करें।


2
छवि डाउनलोड करने के लिए सही हेडर भेजने के लिए अपने सर्वर को बताने के लिए Google ड्राइव में डाउनलोड = ट्रू पास किया जाता है। यह ऐसा कुछ नहीं है जो किसी अन्य वातावरण में काम करेगा जब तक कि इसे विशेष रूप से उस तरह से स्थापित नहीं किया गया हो।
मुंचेरेली १०'१६

-15

आपको ऐसा करने के लिए js लिखने की जरूरत नहीं है, बस उपयोग करें:

<a href="path_to/image.jpg" alt="something">Download image</a>

और ब्राउजर खुद ही इमेज डाउनलोड कर लेगा।

यदि किसी कारण से यह डाउनलोड विशेषता को नहीं जोड़ता है। इस विशेषता के साथ आप डाउनलोड करने योग्य फ़ाइल के लिए एक नाम सेट कर सकते हैं:

<a href="path_to/image.jpg" download="myImage">Download image</a>

छवि का लिंक केवल उसी विंडो में छवि को खोलेगा, जब तक कि आपका ब्राउज़र अलग से कॉन्फ़िगर नहीं किया गया हो। downloadविशेषता सभी ब्राउज़रों में समर्थित नहीं है।
एड्रियन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.