come impostare un nome di file usando window.open

Sto provando a scaricare il risultato temporaneo calcolato da javascript. Diciamo che ho una stringa str , voglio scaricare un file che contiene str e lo chiama come data.csv , sto usando il seguente codice:

 window.open('data:text/csv;charset=utf-8,' + str); 

OK, il file può essere scaricato correttamente, ma come posso denominare il file data.csv automaticamente piuttosto che impostare il nome ogni volta manualmente?

Grazie!

Puoi ottenerlo utilizzando l’attributo download per gli elementi . Per esempio:

 Download Your Foo 

Questo attributo indica che il file deve essere scaricato (anziché visualizzato, se applicabile) e specifica il nome del file da utilizzare per il file scaricato.

Invece di usare window.open() potresti generare un link invisibile con l’attributo download e .click() it.

 var str = "Name, Price\nApple, 2\nOrange, 3"; var uri = 'data:text/csv;charset=utf-8,' + str; var downloadLink = document.createElement("a"); downloadLink.href = uri; downloadLink.download = "data.csv"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); 

Sfortunatamente questo non è supportato da tutti i browser, ma aggiungerlo non peggiorerà le cose per gli altri browser: continueranno a scaricare i file con nomi di file inutili. (Questo presuppone che tu stia utilizzando un tipo MIME è che il browser tenta di scaricarlo. Se stai cercando di consentire all’utente di scaricare un file .html invece di visualizzarlo, questo non ti farà nulla di buono nei browser non supportati. )

Non funziona nell’ultimo Chrome, l’ho modificato e il seguente codice funzionerà correttamente,

  $("#download_1").click(function() { var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]'; var json = $.parseJSON(json_pre); var csv = JSON2CSV(json); var downloadLink = document.createElement("a"); var blob = new Blob(["\ufeff", csv]); var url = URL.createObjectURL(blob); downloadLink.href = url; downloadLink.download = "data.csv"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); }); 

Quindi, quando fai clic sul pulsante Download_1 id, verrà creato un link per il download invisibile e fai clic su di esso. Ho usato un’altra funzione per preparare js.

La funzione JSON2CSV è la seguente:

 function JSON2CSV(objArray) { var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; var str = ''; var line = ''; if ($("#labels").is(':checked')) { var head = array[0]; if ($("#quote").is(':checked')) { for (var index in array[0]) { var value = index + ""; line += '"' + value.replace(/"/g, '""') + '",'; } } else { for (var index in array[0]) { line += index + ','; } } line = line.slice(0, -1); str += line + '\r\n'; } for (var i = 0; i < array.length; i++) { var line = ''; if ($("#quote").is(':checked')) { for (var index in array[i]) { var value = array[i][index] + ""; line += '"' + value.replace(/"/g, '""') + '",'; } } else { for (var index in array[i]) { line += array[i][index] + ','; } } line = line.slice(0, -1); str += line + '\r\n'; } return str; } 

Spero che aiuti gli altri 🙂

Una soluzione per IE è utilizzare msSaveBlob e passare il nome del file.

Per i moderni browser la soluzione va così, testata: IE11, FF e Chrome

  var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'}); //IE11 & Edge if (navigator.msSaveBlob) { navigator.msSaveBlob(csvData, exportFilename); } else { //In FF link must be added to DOM to be clicked var link = document.createElement('a'); link.href = window.URL.createObjectURL(csvData); link.setAttribute('download', exportFilename); document.body.appendChild(link); link.click(); document.body.removeChild(link); } 

C’è una buona discusione su questo qui

Una versione più breve di quella accettata (nel mio caso dovevo usare unicode)

 var link = document.createElement("a"); link.href = 'data:text/csv,' + encodeURIComponent("algún texto"); link.download = "Example.csv"; link.click();