Atrybut pobierania nie działa w przeglądarce Firefox

Question

Próbuję pozwolić użytkownikowi pobrać pewne dane w postaci pliku CSV (tekstowego), używając JavaScript i atrybutu pobierania HTML5 (http://caniuse.com/#feat=download).

Dane są tworzone w postaci tablicy, a następnie dodawane do nowego obiektu Blob.

Działa doskonale w Chrome i Operze, ale nie działa w ogóle w Firefoksie.

oryginalny przykład ja próbuje skopiować: http://blog.eliacontini.info/post/79860720828/export-to-csv-using-javascript-the-download-attribute

Fiddle: http://jsfiddle.net/8wos7cf8/5/

Javascript:

$('#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); 
    link.click(); 
} else { 
    alert('CSV export only works in Chrome, Firefox, and Opera.'); 
} 
}); 

HTML:

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

Kiedy dodać alert z:

alert(window.URL.createObjectURL(blob)); 

uzyskać ten rezultat Firefox:

... i ten wynik w Chrome/Opera:

więc wydaje się, że pomija URL ścieżka w Firefox z jakiegoś powodu.

Answer 1

Można spróbować dodać element do DOM przed wywołaniem kliknij:

document.body.appendChild(link); 
link.click(); 
document.body.removeChild(link); 

ten pracował dla mnie w Firefoksie 34

jsfiddle: http://jsfiddle.net/8wos7cf8/7/