2013-03-21 17 views
27

Sto tentando di aggiungere una funzionalità di opzione di download csv nel mio sito web. Dovrebbe convertire la tabella html presente nel sito Web in contenuto csv e renderla scaricabile. Ho cercato su internet un buon plugin e ho trovato alcuni utili come http://www.dev-skills.com/export-html-table-to-csv-file/ ma usa lo script php per fare la parte di download. Mi stavo chiedendo se c'è una libreria javascript pura disponibile per fare questa funzione utilizzando i software lato server come node.js senza l'uso di PHP ??export html table a csv

+2

possibile duplicato di [Esporta in CSV in jQuery] (http://stackoverflow.com/questions/4639372/export-to-csv-in-jquery) –

risposta

21

Utilizzando solo jQuery e vaniglia Javascript:

export-to-html-table-as-csv-file-using-jquery

Mettete questo codice in uno script da caricare nella sezione head:

$(document).ready(function() { 
    $('table').each(function() { 
     var $table = $(this); 

     var $button = $("<button type='button'>"); 
     $button.text("Export to spreadsheet"); 
     $button.insertAfter($table); 

     $button.click(function() { 
      var csv = $table.table2CSV({ 
       delivery: 'value' 
      }); 
      window.location.href = 'data:text/csv;charset=UTF-8,' 
      + encodeURIComponent(csv); 
     }); 
    }); 
}) 

Note:

Richiede jQuery e table2CSV: Aggiungi rif. Script erenze su entrambe le librerie prima dello script sopra.

Il selettore table viene utilizzato come esempio e può essere regolato in base alle proprie esigenze.

Funziona solo nei browser con il pieno supporto Data URI: Firefox, Chrome e Opera, non in IE, che supporta solo Data URIs per incorporare i dati immagine binari in una pagina.

Per la compatibilità completa con il browser, è necessario utilizzare un approccio leggermente diverso che richiede uno script lato server su echo CSV.

+1

Ciao ... grazie per la risposta ... ma quando Provo a scaricare il file tabletoCsv dal link che hai fornito .. mostra l'errore "pagina non trovata" – sam

+1

Ciao @sam, puoi trovare la libreria qui: http://www.table2csv.com/ – melancia

+0

Grazie per il rispondere!!! Apprezzo davvero il tuo aiuto !! Ho trovato un'altra opzione interessante anche dopo un sacco di ricerca http://www.datatables.net/examples/ – sam

5

Non è necessario lo script PHP sul lato server. Non che nel lato client solo nei browser che accettano Data URIs:

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

I dati URI sarà qualcosa di simile:

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

È possibile chiamare questo URI da:

  • utilizzando window.open
  • o impostazione di window.location
  • o dall'href di un'ancora
  • aggiungendo l'attributo di download che 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 testare l'ancora al di sotto in una pagina HTML:

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

Per creare il contenuto, ottenendo i valori dalla tabella, è possibile utilizzare table2CSV menzionato da MelanciaUK e fare:

var csv = $table.table2CSV({delivery:'value'}); 
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv); 
8

C'è molto soluzione facile libero e open source a http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html

prima scaricare il file javascript e file di esempio dalla https://github.com/jmaister/excellentexport/releases/tag/v1.4

La pagina html ha l'aspetto seguente.

Assicurarsi che il file javascript si trovi nella stessa cartella o modificare di conseguenza il percorso dello script nel file html.

<html> 
<head> 
    <title>Export to excel test</title> 
    <script src="excellentexport.js"></script> 
    <style> 
     table, tr, td { 
      border: 1px black solid; 
     } 
    </style> 
</head> 
<body> 
    <h1>ExcellentExport.js</h1> 

    Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and <a href="https://github.com/jmaister/excellentexport">GitHub</a>. 

    <h3>Test page</h3> 

    <br/> 

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a> 
    <br/> 

    <a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a> 
    <br/> 

    <table id="datatable"> 
     <tr> 
      <th>Column 1</th> 
      <th>Column "cool" 2</th> 
      <th>Column 3</th> 
     </tr> 
     <tr> 
      <td>100,111</td> 
      <td>200</td> 
      <td>300</td> 
     </tr> 
     <tr> 
      <td>400</td> 
      <td>500</td> 
      <td>600</td> 
     </tr> 
     <tr> 
      <td>Text</td> 
      <td>More text</td> 
      <td>Text with 
       new line</td> 
     </tr> 
    </table> 

</body> 

E 'molto facile da usare questo come ho provato la maggior parte degli altri metodi.

+0

Non funziona in IE9. – ajeh

+1

È possibile utilizzare un pulsante invece di un ancoraggio? – Hooli

+0

Non funziona, scarica la pagina HTML. –

1

Ho trovato che esiste una libreria per questo. Vedi l'esempio qui:

https://editor.datatables.net/examples/extensions/exportButtons.html

Oltre al codice di cui sopra, i seguenti file libreria JavaScript vengono caricati per l'uso in questo esempio:

In HTML, includere script seguenti:

jquery.dataTables.min.js 
dataTables.editor.min.js 
dataTables.select.min.js 
dataTables.buttons.min.js 
jszip.min.js  
pdfmake.min.js 
vfs_fonts.js 
buttons.html5.min.js  
buttons.print.min.js 

Abilita i pulsanti aggiungendo script come:

<script> 
$(document).ready(function() { 
    $('#table-arrays').DataTable({ 
     dom: '<"top"Blf>rt<"bottom"ip>', 
     buttons: ['copy', 'excel', 'csv', 'pdf', 'print'], 
     select: true, 
    }); 
}); 
</script> 

Per qualche motivo, l'esportazione excel risulta in un file danneggiato, ma può essere riparata. In alternativa, disabilitare excel e utilizzare l'esportazione csv.