Как скачать mp3-файл в Firefox с помощью тега Anchor?

Question

На моем веб-сайте я пытаюсь загрузить файл, используя следующий код. Он работает нормально в chrome и загружает файл. Но в firefox его файл открытия на другой вкладке и воспроизведение. Пожалуйста, предложите любой другой способ скачать mp3

FYI: Файлы загружаются с других сайтов и, пожалуйста, дайте мне ответ, связанный с загрузкой 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(); 

Answer 1

Вы можете использовать скрытый 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/

Answer 2

попробовать этот код:

$('#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>