2016-11-29 168 views
0

在我的網站中,我正嘗試使用以下代碼下載文件。它在Chrome中正常運行並下載文件。但在Firefox中打開其他選項卡中的文件並播放它。請推薦任何其他方法下載mp3如何使用Anchor標籤在Firefox中下載mp3文件?

供參考:文件正從其他網站下載,並請給我一個有關mp3文件下載的答案,而不是任何文本下載。可能是它與跨源數據下載有關。

代碼:

var anchor = document.createElement('a'); 
    anchor.href= 'http://www.example.com/Albums/NameOfalbum/songname.mp3'; //Cross Origin 
    anchor.download= 'FileName.mp3'; 
    anchor.target='_blank'; 
    anchor.id='download'; 
    if(navigator.userAgent.indexOf("Chrome") != -1) 
     anchor.click(); 
    else if(navigator.userAgent.indexOf("Firefox") != -1) 
     $("#download")[0].click(); 
+0

這就是不同的瀏覽器如何處理它。看看這個:http://stackoverflow.com/questions/14388994/forcing-a-download-using-filesmatch-in-htaccess-at-www-root – Alex

+0

@Alex請給出答案。無法清楚地瞭解您的鏈接。 –

+0

你能用這個php嗎? – anil

回答

0

您可以使用隱藏的iframe等。

function downloadURL(url) { 
    var hiddenIFrameID = 'hiddenDownloader', 
     iframe = document.getElementById(hiddenIFrameID); 
    if (iframe === null) { 
     iframe = document.createElement('iframe'); 
     iframe.id = hiddenIFrameID; 
     iframe.style.display = 'none'; 
     document.body.appendChild(iframe); 
    } 
    iframe.src = url; 
}; 

下面是HTML代碼:

<a href="#" onclick="downloadURL('path/of/mp3/file')">Download File</a> 

或者,如果你想使用服務器端語言如PHP,那麼請點擊此鏈接。

http://www.web-development-blog.com/archives/php-download-file-script/

+0

這也是在播放這首歌。沒有下載它。 –

+0

你能用這個php嗎? – anil

+0

不,我不能使用PHP –

0

試試這個代碼:

$('#downloadButton').click(function() { 
    // some data to export 
    var data = [{ 
     "title": "Book title 1", 
     "author": "Name1 Surname1" 
    }, { 
     "title": "Book title 2", 
     "author": "Name2 Surname2" 
    }, { 
     "title": "Book title 3", 
     "author": "Name3 Surname3" 
    }, { 
     "title": "Book title 4", 
     "author": "Name4 Surname4" 
    }]; 

    // prepare CSV data 
    var csvData = new Array(); 
    csvData.push('"Book title","Author"'); 
    data.forEach(function (item, index, array) { 
     csvData.push('"' + item.title + '","' + item.author + '"'); 
    }); 

    // download stuff 
    var fileName = "data.csv"; 
    var buffer = csvData.join("\n"); 
    var blob = new Blob([buffer], { 
     "type": "text/csv;charset=utf8;" 
    }); 
    var link = document.createElement("a"); 

    if (link.download !== undefined) { // feature detection 
     // Browsers that support HTML5 download attribute 
     link.setAttribute("href", window.URL.createObjectURL(blob)); 
     link.setAttribute("download", fileName); 
     document.body.appendChild(link); 
     link.click(); 
     document.body.removeChild(link); 
    } else { 
     alert('CSV export only works in Chrome, Firefox, and Opera.'); 
    } 
}); 

HTML:

<div class="toggle-button" id="downloadButton"><span>Export to CSV</span> 
</div> 

Download attribute not working in Firefox

PS: HTML anchor tag download attribute not working in Firefox for jpg and png files

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(); 
} 

HTML:

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

請使用我的代碼和答案 –