如何使用Anchor标签在Firefox中下载mp3文件？

Question

In my website I'm trying to download a file using following code. It works normally in chrome and downloads the file. But in firefox its opening file in other tab and playing it. Please suggest any other method to download mp3

FYI: Files are getting downloaded from other websites and please give me an answer related to mp3 file download not any text downloads. May be it is Related to cross origin downloads.

Code:

    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

You can use hidden iframe like.

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

Here is HTML code:

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

Or if you want to use server side language like PHP then please follow this link.

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

Answer 2

try this code:

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