wake-up-neo.com

hTML-Tabelle nach CSV exportieren

Ich versuche, eine Funktion der CSV-Downloadoption auf meiner Website hinzuzufügen. Es sollte die in der Website vorhandene HTML-Tabelle in csv-Inhalt konvertieren und herunterladbar machen. Ich habe im Internet nach einem guten Plugin gesucht und ein paar nützliche gefunden, z. B. http://www.dev-skills.com/export-html-table-to-csv-file/ der Download-Teil Ich habe mich gefragt, ob es eine reine Javascript-Bibliothek gibt, die diese Funktion mit serverseitigen Softwares wie node.js ohne Verwendung von PHP verwendet.

javascriptjquerynode.jshtml-tableexport-to-csv
38
sam

Verwenden Sie nur jQuery und Vanilla Javascript:

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

Fügen Sie diesen Code in ein Skript ein, um in den Abschnitt head geladen zu werden:

 $(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);
        });
    });
})

Anmerkungen:

Benötigt jQuery und table2CSV : Fügt vor dem obigen Skript Skriptverweise zu beiden Bibliotheken hinzu.

Der table-Selektor dient als Beispiel und kann an Ihre Bedürfnisse angepasst werden.

Es funktioniert nur in Browsern mit voller Data URI-Unterstützung: Firefox, Chrome und Opera, nicht im IE, der nur Data URIs zum Einbetten von binären Bilddaten in eine Seite unterstützt.

Für eine vollständige Browserkompatibilität müssen Sie einen etwas anderen Ansatz verwenden, der ein serverseitiges Skript für echo der CSV erfordert.

33
melancia

Es gibt eine sehr einfache kostenlose und Open-Source-Lösung unter http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-Excel-csv.html

Laden Sie zunächst die Javascript-Datei und die Beispieldateien von https://github.com/jmaister/excellentexport/releases/tag/v1.4 herunter.

Die HTML-Seite sieht wie folgt aus. 

Stellen Sie sicher, dass sich die Javascript-Datei im selben Ordner befindet, oder ändern Sie den Pfad des Skripts in der HTML-Datei entsprechend.

<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>

Es ist sehr einfach, dies zu verwenden, da ich die meisten anderen Methoden ausprobiert habe.

10
Buddhika Ariyaratne

Sie benötigen kein PHP -Skript auf der Serverseite. Tun Sie das nur auf der Clientseite, in Browsern, die Data URIs akzeptieren:

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

Der Daten-URI sieht etwa so aus:

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

Sie können diese URI aufrufen, indem Sie:

  • window.open verwenden 
  • oder den window.location einstellen
  • oder durch den Anker eines Ankers
  • durch das Hinzufügen des Download-Attributs wird es in Chrome funktionieren, muss noch im IE getestet werden. 

Kopieren Sie zum Testen einfach die oben genannten URIs und fügen Sie sie in die Adressleiste Ihres Browsers ein. Oder testen Sie den Anker unten in einer HTML-Seite:

<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>

Um den Inhalt zu erstellen und die Werte aus der Tabelle abzurufen, können Sie table2CSV verwenden, das von MelanciaUK erwähnt wird, und Folgendes tun:

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

Sollte auf jedem modernen Browser und ohne jQuery oder Abhängigkeiten funktionieren, hier meine Implementierung:

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id) {
    // Select rows from table_id
    var rows = document.querySelectorAll('table#' + table_id + ' tr');
    // Construct csv
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {
            // Clean innertext to remove multiple spaces and jumpline (break csv)
            var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
            // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
            data = data.replace(/"/g, '""');
            // Push escaped string
            row.Push('"' + data + '"');
        }
        csv.Push(row.join(';'));
    }
    var csv_string = csv.join('\n');
    // Download it
    var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
    var link = document.createElement('a');
    link.style.display = 'none';
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Dann fügen Sie Ihren Download-Button/Link hinzu:

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>

Die CSV-Datei ist zeitgesteuert und mit dem Standard-Excel-Format kompatibel.

3
Calumah

Ich habe gefunden, dass es dafür eine Bibliothek gibt. Beispiel hier sehen:

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

Zusätzlich zu dem obigen Code werden die folgenden Javascript-Bibliotheksdateien für die Verwendung in diesem Beispiel geladen:

Fügen Sie in HTML folgende Skripts ein:

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

Aktivieren Sie Schaltflächen, indem Sie folgende Skripts hinzufügen:

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

Aus irgendeinem Grund führt der Excel-Export zu einer beschädigten Datei, kann jedoch repariert werden. Deaktivieren Sie alternativ Excel und verwenden Sie den CSV-Export.

2
jzhou

Benutzte die Antwort oben, änderte sie aber für meine Bedürfnisse. 

Ich habe die folgende Funktion verwendet und in meineREACT-Datei importiert, wo ich die CSV-Datei herunterladen musste. 

Ich hatte ein span-Tag in meinen th-Elementen. Kommentare zu den meisten Funktionen/Methoden hinzugefügt. 

import { tableToCSV, downloadCSV } from './../Helpers/exportToCSV';


export function tableToCSV(){
  let tableHeaders = Array.from(document.querySelectorAll('th'))
    .map(item => {
      // title = splits elem tags on '\n',
      // then filter out blank "" that appears in array.
      // ex ["Timestamp", "[Full time]", ""]
      let title = item.innerText.split("\n").filter(str => (str !== 0)).join(" ")
      return title
    }).join(",")

  const rows = Array.from(document.querySelectorAll('tr'))
  .reduce((arr, currRow) => {
    // if tr tag contains th tag.
    // if null return array.
    if (currRow.querySelector('th')) return arr

    // concats individual cells into csv format row.
    const cells = Array.from(currRow.querySelectorAll('td'))
      .map(item => item.innerText)
      .join(',')
    return arr.concat([cells])
  }, [])

return tableHeaders + '\n' + rows.join('\n')
}

export function downloadCSV(csv){
  const csvFile = new Blob([csv], { type: 'text/csv' })
  const downloadLink =  document.createElement('a')
  // sets the name for the download file
  downloadLink.download = `CSV-${currentDateUSWritten()}.csv`
  // sets the url to the window URL created from csv file above
  downloadLink.href = window.URL.createObjectURL(csvFile)
  // creates link, but does not display it.
  downloadLink.style.display = 'none'
  // add link to body so click function below works
  document.body.appendChild(downloadLink)

  downloadLink.click()
}

Wenn der Benutzer auf "Exportieren nach CSV" klickt, wird die folgende Funktion in React ausgelöst.

  handleExport = (e) => {
    e.preventDefault();
    const csv = tableToCSV()
    return downloadCSV(csv)
  }

Beispiel für HTML-Tabellenelemente.

  <table id="datatable">
        <tbody>
          <tr id="tableHeader" className="t-header">
            <th>Timestamp
              <span className="block">full time</span></th>
            <th>current rate
              <span className="block">alt view</span>
            </th>
            <th>Battery Voltage
              <span className="block">current voltage
              </span>
            </th>
            <th>Temperature 1
              <span className="block">[C]</span>
            </th>
            <th>Temperature 2
              <span className="block">[C]</span>
            </th>
            <th>Time & Date </th>
          </tr>

        </tbody>
        <tbody>
          {this.renderData()}
        </tbody>
      </table>
    </div>
0
Roger Perez