एचटीएमएल एंकर टैग डाउनलोड विशेषता जेपीजी और पीएनजी फाइलों के लिए फ़ायरफ़ॉक्स में काम नहीं कर रही है

Question

मेरे वेब एप्लिकेशन में मैंने किसी भी प्रकार के दस्तावेज़ (.png, .jpg, .docx, .xls, ...)
अपलोड करने के लिए उपयोगकर्ता का समर्थन किया है। मैं इन दस्तावेजों के लिए डाउनलोड कार्यक्षमता को लागू करने की कोशिश कर रहा हूं।

यदि आप डाउनलोड लिंक पर क्लिक करते हैं तो Google क्रोम में सभी उपरोक्त दस्तावेज़ों के लिए सहेजें संवाद दिखाया गया है।
docx और xls के लिए
मोज़िला फ़ायरफ़ॉक्स में ठीक काम करता है, सहेजें संवाद .png और .jpg डाउनलोड टैग के रूप में काम नहीं कर रहा उम्मीद यानी, डाउनलोड संवाद या संवाद सहेजें सीधे प्रकट नहीं होता है, इसके लिए लेकिन दिखाया गया है उस छवि को खोलो।

मेरे कोड:

<a href="/img/14340.jpg" download="14340.jpg">Download</a> 

मैं लगभग सभी समाधान stackoverflow पर उल्लेख किया है और गूगल ने सुझाव दिया की कोशिश की है। डाउनलोड टैग से try adding the element to the DOM before triggering the click

निकालें फ़ाइल नाम यह बूलियन प्रकार का है और आदि

मैं भी कोशिश की है w3schools lesson on anchor tag and download attribute लेकिन कुछ भी काम कर रहा है: लेकिन उनमें से ज्यादातर कि और अन्य परिवर्तन की तरह 'फ़ायरफ़ॉक्स संस्करण की जांच' का कहना है ।

मेरे मोज़िला फ़ायरफ़ॉक्स संस्करण है: 38.0.5

पी.एस .: क्रोम में और साथ ही फ़ायरफ़ॉक्स .docs, .xls में, .pdf दस्तावेजों ठीक काम करते हैं, समस्या .png और फ़ायरफ़ॉक्स में .jpg के लिए है।

Answer 1

फ़ायरफ़ॉक्स डिफ़ॉल्ट हैंडलिंग, उन्हें दस्तावेज़ में इनलाइन करने के लिए है जो का उपयोग कर png और jpeg संभाल लेंगे। एक लिंक पर क्लिक करते समय, अगर डाउनलोड विशेषता परिभाषित की जाती है, तो फ़ायरफ़ॉक्स को लगता है कि इसके डाउनलोड पहलू को अनदेखा कर एक नई छवि है। यह एक अस्थायी बग हो सकता है।

यहाँ एक तरह से, बेशक नहीं सुपर सुंदर, इस समस्या को हल पाने के लिए छवि के लिए मजबूर कर ओकटेट धारा के रूप में व्याख्या की जानी है।

यह Stackoverflow पर इनलाइन काम नहीं करता है तो आप test it on jsFiddle.

करने के लिए है कोड निम्नलिखित है:

• स्कैन एक-टैग के लिए दस्तावेज़।
• जिनके पास data-link सेट है, उनके पास एक आम क्लिक-हैंडलर संलग्न होगा।
• जब क्लिक किया गया लिंक data-link विशेषता से निकाला गया है (href से # तक है), एक्सएचआर के माध्यम से एक ऐरेबफर के रूप में लोड किया गया है (सीओआरएस आवश्यकताएं लागू होती हैं, इस मामले में कोई समस्या नहीं है), और इसे ऑब्जेक्ट-यूआरएल में परिवर्तित कर दिया गया है ब्लूम सेट माइम-टाइप octet/stream
• ऑब्जेक्ट यूआरएल window.location के रूप में सेट किया गया है ताकि इस बाइनरी डेटा पर रीडायरेक्ट किया जा सके जिससे ब्राउजर उपयोगकर्ता को फाइल डाउनलोड करने के लिए कह सके।

var links = document.querySelectorAll("a"), i = 0, lnk; 

while(lnk = links[i++]) { 
    if (lnk.dataset.link.length) lnk.onclick = toBlob; 
} 

function toBlob(e) { 
    e.preventDefault(); 
    var lnk = this, xhr = new XMLHttpRequest(); 
    xhr.open("GET", lnk.dataset.link); 
    xhr.responseType = "blob"; 
    xhr.overrideMimeType("octet/stream"); 
    xhr.onload = function() { 
    if (xhr.status === 200) { 
     window.location = (URL || webkitURL).createObjectURL(xhr.response); 
    } 
    }; 
    xhr.send(); 
} 

उदाहरण टैग:

<a href="#" data-link="image.jpg">Click to download</a> 

दोष यह है कि आप फ़ाइल नाम में विस्तार ढीली होगी।

यह भी एक डाटा-URL का उपयोग करने के लिए संभव है, लेकिन एक डेटा-यूआरएल ArrayBuffer और एक ब्लॉब उपयोग की तुलना में एक 166% भूमि के ऊपर है।

Answer 2

आप एचटीएमएल 5 विशेषता का उपयोग कर रहे हैं, प्रत्येक ब्राउज़र अलग ढंग से निपटने के। तो ब्राउजर में देखने के बजाए क्लाइंट साइड फोर्सफुल डाउनलोड के लिए https://github.com/dcneiner/Downloadify का उपयोग करें।

Answer 3

एचटीएमएल 5 डाउनलोड गुण पार मूल साइटों के लिए काम नहीं करता। यह देखने के लिए enter link description here

लेकिन हम इस प्रश्न को हल करने का एक और तरीका ढूंढ सकते हैं। यही कारण है कि कैनवास 1. का उपयोग बेस 64 DataURL को imageUrl कॉन्वेंट के लिए फिर छवि स्थानीय छवि

<a id="download" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAEiElEQVRYR82YXWgcVRTH/2d2N82K2UKrBUEamyhWUojdSXfWmkJSmu6Hpk8a7JOKJkE09akWHwRBUGhetC2CiagPajH6ItXsTBJMICFmNjtTCwmKmNYUQaip0E1pPnZ2jswmG7ub3exsM5rO65x77u+ee/73nnsIZX4B5dIecDoE5kYiPAagGkDVqpt5ALPM+BlEYyCXEg/VXylnCrJj/Gxfn2u26uE2EL9GoFpiyACPpCFMm0b6yuKCN2n5qfQu+AS3a48LZh1ATUwIM3gGTOeq53/r+7qtLV1qvpJAQVk/wuCzDPxNEE4b96X7tYaGVCnH1n8xkfC451xRhvkGATsI1DUR9g9tNLYoUNPwcOXCou8DEI4S4cRESLxgB6KYTVDRWplxBowBb2Xy9ZHm5sVCtgWBDvXr96cE/h5Ev3N6+WU1GsxsyWY/qX/CR66Kj8H8kMekp0aj/r/yfa4DsmCWBR5l4Jt4yP8WiHizIDnjmSmg6O8Q8EyFSYfyoXKAxAuJe9we+gFMw2rE/6ajIHnOpJj+HoibjRQf1lobbmV/5wAFZL0XYF885H/O8cjkr46ZpAH9S2a6GQ/729cBraqpF2aq3qmcKRVhK6cguH8iCB1Z9a1E6G0WpKA+RYRTdtUkxbQZAENqROzMTry6qEECtZSS99qYFfWd3p2c2WedUxmgQEw/TsCrasTfWGpV2f9OAVn+JFkbZaYP4xH/+QyQFNPHQNSthvd/WwhIkrXNK43QqYbEnkL+gzH9mEl8Kh4WnyTrbiJO/+jdduPBkeZmYysi1DQ87F5Y2v6H6U4fpKCSeAWmIE1E/C/YhVmJqjM5tJYCsvYpEccpENM+F4ChiYj4WTlATtsGlMTzMKmFJDlx0WRXx2Rk/2Q5kxRSVKGo2fUZGNAbYHIPSbI2Z6R4r9baMFdssKRoHWB8VOj/7RLPABFq1tkxLqsRsXYjuMCQupMMz68W0NIO0+eLRR9Zsrsay87pCNX1TVfc61uczwDdTFZWTbfVLd8tQHPsNh6NH5Gu/2dbZp3oYbHF5pYlLrIgtMeP+hNbGSErqck0eyko61+AebBc2TudQ2uytw5Gq2ZSw+KLWxkhKXswHhiarBEM1/hGV0dROQOwJfs8u/yF51wddi7Xghfiymskp9S404Mx53K90/LDyRxaV35YD8GrvtopJpyMh8Tv7OSSU0ABRXuaGN05Bdq/J6/ZA9N4/P8uYUHcqYYODFocOUW+JGufgOBVQ+JxO1HarI2kaOfBuKWGxZeyvrbuGaTo74L58IbPIIvyrnooZsN2ULm0K81GPwMzZKbancop69nDgqeXgFoXuaPjofpr+dtetNnwRN+416za9j6IW5johF31FcurFTXxGTANlt1suN2ppEy2gIWzAK4RoTu1k+Vy2jGe6xRmxkkAu0BmV1ZNxcBL9oesgdmGFRF3AVQDcIyJRwg0ZSzzLB7AjcwEf2K7u4KqGbyPmJoARAHMMPhcdfLyV440rPJXknk2makICI0M2kvAbgC+VbskA1cJ/AsYYyx4YuW29P4BGmfO2Alhem8AAAAASUVORK5CYII=" download="image.jpg">downimage</a>