2012-12-17 2 views
8

Ich möchte in einigen Seiten HTML-Element einzufügen:Anker Download-Eigenschaft funktioniert nicht auf einigen Seiten (Gmail)?

<a download="somedata.csv" 
    id="downloadLink" 
    href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333" 
> 
    Click Me 
</a> 

In allen Seiten, als ich das dom über Plugin oder manuell in Elementen Inspektoren ändern, dieses Element Seite dom schließen, es funktioniert super!
Aber, wenn ich das gleiche in Google Mail-Seiten mache, hat die generierte Datei nicht den Namen "somedata.csv" und die Erweiterung ist verloren "csv"!

Ich versuchte dies in der lokalen Datei, in der Datei auf localhost hochgeladen, und in vielen externen Website-Seiten, es funktioniert in allen außer Gmail-Seiten.

Warum funktioniert es nicht in Google Mail-Seiten? Und wie behebt man das?

+0

Nach dieser Seite geht das Extension am Ende des href nicht innerhalb der Download-Eigenschaft: http://davidwalsh.name/download-attribute –

+0

Aber der Wert der href, in meinem Fall, ist Daten keine Datei. –

+0

es ist das gleiche Problem auf Facebook-Seiten auch, das Download-Dateinamen-Attribut wird ignoriert – user280109

Antwort

5

Für alle, die interessiert sind, ich löste es Javascript/Ajax, hier ist die Lösung:

Hier ist die Funktion:

var downloadDataURI = function($, options) { 
    if(!options) 
     return; 
    $.isPlainObject(options) || (options = {data: options}); 
    if(!$.browser.webkit) 
     window.location = options.data; 
    options.filename || (options.filename = "download." + options.data.split(",")[0].split(";")[0].substring(5).split("/")[1]); 
    options.url || (options.url = "http://download-data-uri.appspot.com/"); 
    $('<form method="post" action="'+options.url+'" style="display:none"><input type="hidden" name="filename" value="'+options.filename+'"/><input type="hidden" name="data" value="'+options.data+'"/></form>').submit().remove(); 
} 

Und hier ist, wie man es nennen:

downloadDataURI($, {filename: "test.csv",data:"data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"}); 
+1

Dateiname wird weder von Firefox auf Ubunto oder Firefox auf Win8 geehrt –

+1

Funktioniert nicht in IE10. '$ .browser.webkit' ist nicht wahr, daher wird' window.location' gesetzt und IE zeigt 'Webseite kann nicht angezeigt werden' an. –

2

In Chrome mit JQuery, versuche ich diesen Ansatz:

var dataUri = "data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333" 
var filename = "somedata.csv" 

$("<a download='" + filename + "' href='" + dataUri + "'></a>")[0].click(); 

Ich habe eine temporäre Verbindung erstellt und ein Klickereignis darauf ausgelöst. aber nicht sicher, ob andere Browser funktionieren oder nicht.

+1

Funktioniert gut in Chrome. Hast du eine Lösung für Firefox gefunden? – Owen

+0

an den Körper anhängen löst das Problem auf Firefox, siehe https://stackoverflow.com/questions/27814048 – Kokizzu