Esporta in csv in jQuery

Sto generando dynamicmente un div che è come:

Col1 Col2 Col3
Val1 Val2 Val3
Val11 Val22 Val33
Val111 Val222 Val333

E ci sono molti più elementi nella pagina. Ora, come posso ottenere un file CSV come questo:

 Col1,Col2,Col3 Val1,Val2,Val3 Val11,Val22,Val33 Val111,Val222,Val333 

usando jQuery?

ho bisogno di un file per salvare anche dailog, come questo:

alt text

Grazie.

Puoi farlo solo dal lato client, nel browser che accetta gli URI dei dati :

 data:application/csv;charset=utf-8,content_encoded_as_url 

Nel tuo esempio l’URI dei dati deve essere:

 https://stackoverflow.com/questions/4639372/export-to-csv-in-jquery/data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333 

Puoi chiamare questo URI:

  • usando window.open
  • o impostazione di window.location
  • o dal href di un’ancora
  • aggiungendo l’attributo download funzionerà in chrome, devono ancora eseguire il test in IE.

Per testare, copiare semplicemente gli URI sopra e incollare nella barra degli indirizzi del browser. O prova l’ancora qui sotto in una pagina HTML:

 Example 

Per creare il contenuto, ottenendo i valori dalla tabella, puoi usare table2CSV e fare:

 var data = $table.table2CSV({delivery:'value'}); $('') .attr('id','downloadFile') .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data)) .attr('download','filename.csv') .appendTo('body'); $('#downloadFile').ready(function() { $('#downloadFile').get(0).click(); }); 

La maggior parte, se non tutte, le versioni di IE non supportano la navigazione in un collegamento dati, quindi è necessario implementare un hack, spesso con un iframe . Usando un iFrame combinato con document.execCommand('SaveAs'..) , è ansible ottenere un comportamento simile sulla maggior parte delle versioni attualmente utilizzate di IE.

Questa è la mia implementazione (basata su: https://gist.github.com/3782074 ):

Utilizzo : HTML:

 ...
DOWNLOAD CSV

JS:

 $("a[download]").click(function(){ $("table.download").toCSV(this); }); 

Codice :

 jQuery.fn.toCSV = function(link) { var $link = $(link); var data = $(this).first(); //Only one table var csvData = []; var tmpArr = []; var tmpStr = ''; data.find("tr").each(function() { if($(this).find("th").length) { $(this).find("th").each(function() { tmpStr = $(this).text().replace(/"/g, '""'); tmpArr.push('"' + tmpStr + '"'); }); csvData.push(tmpArr); } else { tmpArr = []; $(this).find("td").each(function() { if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) { tmpArr.push(parseFloat($(this).text())); } else { tmpStr = $(this).text().replace(/"/g, '""'); tmpArr.push('"' + tmpStr + '"'); } }); csvData.push(tmpArr.join(',')); } }); var output = csvData.join('\n'); var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output); $link.attr("href", uri); } 

Note :

  • Usa tag “th” per le intestazioni. Se non sono presenti, non vengono aggiunti.
  • Questo codice rileva i numeri nel formato: – ####. ## (Sarà necessario modificare il codice per accettare altri formati, ad esempio utilizzando le virgole).

AGGIORNAMENTO :

La mia precedente implementazione ha funzionato bene ma non ha impostato il nome file csv. Il codice è stato modificato per utilizzare un nome file ma richiede un elemento . Sembra che non sia ansible generare dynamicmente l’elemento e triggersre l’evento “clic” (forse per motivi di sicurezza?).

DEMO

http://jsfiddle.net/nLj74t0f/

(Purtroppo jsfiddle non riesce a generare il file e invece genera un errore: ‘usa la richiesta POST’, non lasciare che questo errore ti impedisca di testare questo codice nella tua applicazione).

Recentemente ho pubblicato una libreria software gratuita per questo: “html5csv.js” – GitHub

Ha lo scopo di semplificare la creazione di piccole app di simulatore in Javascript che potrebbero dover importare o esportare file CSV, manipolare, visualizzare, modificare i dati, eseguire varie procedure matematiche come il fitting, ecc.

Dopo aver caricato “html5csv.js”, il problema della scansione di una tabella e la creazione di un CSV è una soluzione unica:

 CSV.begin('#PrintDiv').download('MyData.csv').go(); 

Ecco una demo JSFiddle del tuo esempio con questo codice .

Internamente, per Firefox / Chrome questa è una soluzione orientata agli URL di dati, simile a quella proposta da @italo, @lepe e @adeneo (su un’altra domanda). Per IE

La chiamata CSV.begin() imposta il sistema per leggere i dati in un array interno. Quella raccolta allora si verifica. Quindi .download() genera internamente un collegamento URL dati e fa clic con un click-linker. Questo spinge un file all’utente finale.

Secondo caniuse IE10 non supporta . Quindi per IE la mia libreria chiama internator.msSaveBlob navigator.msSaveBlob() internamente, come suggerito da @Manu Sharma

Di seguito sono riportati due WORKAROUND sul problema dell’triggerszione dei download solo dal client. Nei browser successivi dovresti guardare “blob”


1. Trascina e rilascia il tavolo

Lo sapevi che puoi semplicemente trascinare il tuo tavolo in Excel?

Ecco come selezionare la tabella per tagliare, trascinare o trascinare

Seleziona una tabella completa con Javascript (da copiare negli appunti)


2. crea una pagina popup dal tuo div

Sebbene non generi una finestra di dialogo di salvataggio , se il popup risultante viene salvato con estensione .csv , verrà trattato correttamente da Excel.

La stringa potrebbe essere
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
ad esempio tab-delimitato con un linefeed per le linee.

Ci sono plugin che creeranno la stringa per te – come http://plugins.jquery.com/project/table2csv

 var w = window.open('','csvWindow'); // popup, may be blocked though // the following line does not actually do anything interesting with the // parameter given in current browsers, but really should have. // Maybe in some browser it will. It does not hurt anyway to give the mime type w.document.open("text/csv"); w.document.write(csvstring); // the csv string from for example a jquery plugin w.document.close(); 

NOTA BENE : Questi sono soluzioni alternative e non risponde completamente alla domanda che attualmente ha la risposta per la maggior parte del browser: non è ansible solo sul client

Usando solo jQuery, non è ansible evitare una chiamata al server.

Tuttavia, per ottenere questo risultato, sto utilizzando Downloadify , che mi consente di salvare i file senza dover effettuare un’altra chiamata al server. In questo modo si riduce il carico del server e si ottiene una buona esperienza utente.

Per ottenere un CSV corretto devi solo eliminare tutti i tag non necessari e inserire un “,” tra i dati.

Non è ansible evitare una chiamata al server qui, JavaScript semplicemente non può (per ragioni di sicurezza) salvare un file nel file system dell’utente. Dovrai inviare i tuoi dati al server e inviare direttamente il file .csv come link o allegato.

HTML5 ha una certa capacità di farlo (anche se il salvataggio non è specificato – solo un caso d’uso, puoi leggere il file se vuoi), ma non c’è una soluzione cross-browser in atto ora.

Basta provare la seguente codifica … molto semplice da generare CSV con i valori delle tabelle HTML. I problemi del browser non verranno

 < !DOCTYPE html>        
Jill Smith 50
Eve Jackson 94
John Doe 80