HTML錨標記下載屬性在Firefox中不適用於jpg和png文件

在我的web應用程序中，我支持用戶上傳任何類型的文檔（.png，.jpg，.docx，.xls，...）
我試圖爲這些文檔實現下載功能。

在谷歌瀏覽器中，如果點擊下載鏈接保存對話框顯示所有上述文件。

在使用Mozilla Firefox的docx和XLS做工精細，保存對話框顯示但爲.png格式和的.jpg下載標籤未按預期即下載對話框或保存對話框不直接出現，它打開該圖像。HTML錨標記下載屬性在Firefox中不適用於jpg和png文件

我的代碼：

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

我幾乎嘗試了計算器提到和谷歌所有建議的解決方案。但他們大多表示，「檢查的Firefox版本」和其他變化，如：從下載標籤 try adding the element to the DOM before triggering the click

刪除的文件名是布爾型等

我也曾嘗試w3schools lesson on anchor tag and download attribute，但似乎沒有奏效。

我的Mozilla Firefox瀏覽器的版本是：38.0.5

P.S：在Chrome以及Firefox中.docs，.xls的，.pdf文檔做工精細，問題是在Firefox .PNG和.jpg。

來源

2015-06-12 tejas033

目前，它適用於Firefox和Chrome瀏覽器我，但請記住， **下載**屬性是** HTML5 **功能。你已經檢查過了嗎？ http://stackoverflow.com/questions/3916191/download-data-url-file ..或直接這個：https：//github.com/dcneiner/Downloadify，儘管你不使用jquery ...（它工作沒有jQuery的，雖然） – briosheje

你能告訴我你的完整代碼....可能我會對你有所幫助.. –

它似乎已停止在最新的Firefox工作。我曾經在小書籤中使用下載屬性，直到最近它一直在工作，但現在我發現它打開了一個文件（.mp4）而不是顯示「保存」對話框。該死的Firefox。 – forsajt

Firefox將使用默認處理來處理png和jpeg，默認處理是在文檔中內聯它們。當點擊一個鏈接時，即使定義了下載屬性，似乎也會讓Firefox認爲它有一個新的圖像，而忽略了它的下載方面。這可能是一個暫時的錯誤。

這是一種確實不是超級優雅的方式來解決這個問題，迫使圖像被解釋爲八位字節流。

它不在線＃2，所以你必須test it on jsFiddle.

工作代碼執行以下操作：對於標籤

掃描文檔。
那些有data-link集合的將有一個共同的點擊處理程序連接。
點擊鏈接時，將從data-link屬性中提取鏈接（href爲se到＃），通過XHR將其作爲ArrayBuffer加載（CORS要求適用，在這種情況下不是問題），並將其轉換爲Object-URL Blob設置爲MIME類型octet/stream
將對象URL設置爲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>

的缺點是，你將失去在文件名擴展。

這也可以使用Data-URL，但與使用ArrayBuffer和blob相比，data-url的開銷是166％。

來源

2015-06-15 06:48:56 K3N

-4

由於您使用的是HTML5屬性，因此每個瀏覽器的處理方式都有所不同。因此，請使用https://github.com/dcneiner/Downloadify進行客戶端強制下載，而不是在瀏覽器中查看。

來源

2015-06-15 07:20:58

請注意，此解決方案需要安裝Flash「最終用戶必須安裝Flash 10或更高版本才能使此插件生效。」 – K3N

-3

HTML5下載屬性不適用於跨源網站。要看到這enter link description here

但我們可以找到另一種方法來解決這個問題。這就是使用畫布 1.修女的IMAGEURL爲base64 DataURL 然後將圖像本地圖像

<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>

來源

2016-05-19 09:01:47

問題中的代碼顯示相對URL。它不是一個跨網站。 – Quentin

HTML錨標記下載屬性在Firefox中不適用於jpg和png文件

回答

相關問題