export html table to csv

Question

I am trying to add a feature of csv download option in my website  It should convert the html table present in the website in to csv content and make it downloadable  Ive been searching through internet for a good plugin and found some usefule ones like http   www dev-skills com export-html-table-to-csv-file   But it uses php script to do the download part  I was wondering if there is a pure javascript library available to do this feature using server side softwares like node js without the use of php

User · Answer

Should work on every modern browser and without jQuery or any dependency, here my implementation :

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ',') {
    // 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(separator));
    }
    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);
}

Then add your download button/link :

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

CSV file is timedated and compatible with default Excel format.

Update after comments: Added second parameter "separator", it can be used to configure another character like ;, it's useful if you have user downloading your csv in different region of the world because they can use another default separator for Excel, for more information see : https://superuser.com/a/606274/908273

User · Answer

A Modern Solution Most of the proposed solutions here will break with nested tables or other elements inside your td elements  I frequently use other elements inside my tables  but only want to export the topmost table  I took some of the code found here from Calumah and added in some modern vanilla ES6 JS  Using textContent is a better solution than innerText as innerText will return any HTML inside your td elements  However  even textContent will return the text from nested elements  An even better solution is to use custom data attributes on your td and pull the values for you CSV from there  Happy coding  function downloadAsCSV tableEle  separator             let csvRows            only get direct children of the table in question  thead  tbody      Array from tableEle children  forEach function node             using scope to only get direct tr of node         node querySelectorAll   scope  gt  tr   forEach function tr               let csvLine                    again scope to only get direct children             tr querySelectorAll   scope  gt  td   forEach function td                     clone as to not remove anything from original                 let copytd   td cloneNode true                  let data                 if copytd dataset val  data   copytd dataset val replace    r n  n  r  gm                      else                       Array from copytd children  forEach function remove                             remove nested elements before getting text                         remove parentNode removeChild remove                                                data   copytd textContent replace    r n  n  r  gm                                        data   data replace    s s  gm       replace   quot  g    quot  quot                    csvLine push   quot   data   quot                               csvRows push csvLine join separator                         var a   document createElement  quot a quot       a style    quot display  none  visibility  hidden quot    safari needs visibility hidden     a href    data text csv charset utf-8     encodeURIComponent csvRows join   n        a download    testfile csv      document body appendChild a      a click       a remove      Edit  cloneNode   updated to cloneNode true  to get insides

User · Answer

1 This is the native javascript solution for this issue  It works on most of modern browsers    x000D   x000D  function export2csv     x000D    let data       x000D    const tableData       x000D    const rows   document querySelectorAll  table tr    x000D    for  const row of rows    x000D      const rowData       x000D      for  const  index  column  of row querySelectorAll  th  td   entries      x000D           To retain the commas in the  Description  column  we can enclose those fields in quotation marks  x000D        if   index   1    3     0    x000D          rowData push       column innerText         x000D          else   x000D          rowData push column innerText   x000D          x000D        x000D      tableData push rowData join        x000D      x000D    data    tableData join   n    x000D    const a   document createElement  a    x000D    a href   URL createObjectURL new Blob  data     type   text csv       x000D    a setAttribute  download    data csv    x000D    document body appendChild a   x000D    a click    x000D    document body removeChild a   x000D    x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  td  th   x000D    border  1px solid  aaa  x000D    padding  0 5rem  x000D    text-align  left  x000D    x000D   x000D  td   x000D    font-size  0 875rem  x000D    x000D   x000D   btn-group   x000D    padding  1rem 0  x000D    x000D   x000D  button   x000D    background-color   fff  x000D    border  1px solid  000  x000D    margin-top  0 5rem  x000D    border-radius  3px  x000D    padding  0 5rem 1rem  x000D    font-size  1rem  x000D    x000D   x000D  button hover   x000D    cursor  pointer  x000D    background-color   000  x000D    color   fff  x000D    x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Name lt  th gt  x000D         lt th gt Author lt  th gt  x000D         lt th gt Description lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt jQuery lt  td gt  x000D         lt td gt John Resig lt  td gt  x000D         lt td gt The Write Less  Do More  JavaScript Library  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt React lt  td gt  x000D         lt td gt Jordan Walke lt  td gt  x000D         lt td gt React makes it painless to create interactive UIs  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Vue js lt  td gt  x000D         lt td gt Yuxi You lt  td gt  x000D         lt td gt The Progressive JavaScript Framework  lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt div class  btn-group  gt  x000D     lt button onclick  export2csv    gt csv lt  button gt  x000D   lt  div gt  x000D   x000D   x000D     2  If you want a pure javascript library  FileSaver js could help you save the code snippets for triggering file download  Besides  FileSaver js will not be responsible for constructing content for exporting  You have to construct the content by yourself in the format you want

User · Answer

You don t need PHP script on server side  Do that in the client side only  in browsers that accept Data URIs   data application csv charset utf-8 content encoded as url   The Data URI will be something like   data application csv charset utf-8 Col1 2CCol2 2CCol3 0AVal1 2CVal2 2CVal3 0AVal11 2CVal22 2CVal33 0AVal111 2CVal222 2CVal333   You can call this URI by    using window open  or setting the window location or by the href of an anchor by adding the download attribute it will work in chrome  still have to test in IE     To test  simply copy the URIs above and paste in your browser address bar  Or test the anchor below in a HTML page    lt a download  somedata csv  href  data application csv charset utf-8 Col1 2CCol2 2CCol3 0AVal1 2CVal2 2CVal3 0AVal11 2CVal22 2CVal33 0AVal111 2CVal222 2CVal333  gt Example lt  a gt    To create the content  getting the values from the table  you can use table2CSV mentioned by MelanciaUK and do   var csv    table table2CSV  delivery  value     window location href    data application csv charset UTF-8     encodeURIComponent csv

User · Answer

I found there is a library for this  See example here   https   editor datatables net examples extensions exportButtons html  In addition to the above code  the following Javascript library files are loaded for use in this example   In HTML  include following scripts   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   Enable buttons by adding scripts like    lt script gt    document  ready  function              table-arrays   DataTable           dom    lt  top Blf gt rt lt  bottom ip gt            buttons    copy    excel    csv    pdf    print            select  true                lt  script gt    For some reason  the excel export results in corrupted file  but can be repaired  Alternatively  disable excel and use csv export

User · Answer

Used the answer above  but altered it for my needs    I used the following function and imported to my REACT file where I needed to download the csv file    I had a span tag within my th elements  Added comments to what most functions methods do    import   tableToCSV  downloadCSV   from       Helpers exportToCSV     export function tableToCSV      let tableHeaders   Array from document querySelectorAll  th         map item   gt             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   gt   str     0   join            return title        join         const rows   Array from document querySelectorAll  tr       reduce  arr  currRow    gt           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   gt  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       When user click export to csv it trigger the following function in react     handleExport    e    gt        e preventDefault        const csv   tableToCSV       return downloadCSV csv        Example html table elems      lt table id  datatable  gt           lt tbody gt             lt tr id  tableHeader  className  t-header  gt               lt th gt Timestamp                lt span className  block  gt full time lt  span gt  lt  th gt               lt th gt current rate                lt span className  block  gt alt view lt  span gt               lt  th gt               lt th gt Battery Voltage                lt span className  block  gt current voltage                lt  span gt               lt  th gt               lt th gt Temperature 1                lt span className  block  gt  C  lt  span gt               lt  th gt               lt th gt Temperature 2                lt span className  block  gt  C  lt  span gt               lt  th gt               lt th gt Time  amp  Date  lt  th gt             lt  tr gt            lt  tbody gt           lt tbody gt             this renderData             lt  tbody gt         lt  table gt       lt  div gt

User · Answer

Using just jQuery  vanilla Javascript  and the table2CSV library   export-to-html-table-as-csv-file-using-jquery  Put this code into a script to be loaded in the head section      document  ready function             table   each function              var  table     this            var  button       lt button type  button  gt              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                            Notes   Requires jQuery and table2CSV  Add script references to both libraries before the script above   The table selector is used as an example  and can be adjusted to suit your needs   It only works in browsers with full Data URI support  Firefox  Chrome and Opera  not in IE  which only supports Data URIs for embedding binary image data into a page   For full browser compatibility you would have to use a slightly different approach that requires a server side script to echo the CSV

User · Answer

I used Calumah s function posted above  but I did run into an issue with his code as poisted   The rows are joined with a semicolon  csv push row join          but the link generated has  text csv  as the content type  Maybe in Windows that isn t a problem  but in Excel for Mac that throws things off    I changed the array join to a comma and it worked perfect

User · Answer

There is a very easy free and open source solution at http   jordiburgos com post 2014 excellentexport-javascript-export-to-excel-csv html  First download the javascript file and sample files from https   github com jmaister excellentexport releases tag v1 4  The html page looks like below    Make sure the the javascript file is in the same folder or change the path of the script in the html file accordingly    lt html gt   lt head gt       lt title gt Export to excel test lt  title gt       lt script src  excellentexport js  gt  lt  script gt       lt style gt          table  tr  td               border  1px black solid                 lt  style gt   lt  head gt   lt body gt       lt h1 gt ExcellentExport js lt  h1 gt       Check on  lt a href  http   jordiburgos com  gt jordiburgos com lt  a gt  and   lt a href  https   github com jmaister excellentexport  gt GitHub lt  a gt         lt h3 gt Test page lt  h3 gt        lt br  gt        lt a download  somedata xls  href     onclick  return ExcellentExport excel this   datatable    Sheet Name Here     gt Export to Excel lt  a gt       lt br  gt        lt a download  somedata csv  href     onclick  return ExcellentExport csv this   datatable     gt Export to CSV lt  a gt       lt br  gt        lt table id  datatable  gt           lt tr gt               lt th gt Column 1 lt  th gt               lt th gt Column  cool  2 lt  th gt               lt th gt Column 3 lt  th gt           lt  tr gt           lt tr gt               lt td gt 100 111 lt  td gt               lt td gt 200 lt  td gt               lt td gt 300 lt  td gt           lt  tr gt           lt tr gt               lt td gt 400 lt  td gt               lt td gt 500 lt  td gt               lt td gt 600 lt  td gt           lt  tr gt           lt tr gt               lt td gt Text lt  td gt               lt td gt More text lt  td gt               lt td gt Text with                 new line lt  td gt           lt  tr gt       lt  table gt    lt  body gt      It is very easy to use this as I have tried most of the other methods

[javascript] export html table to csv

Examples related to javascript

Examples related to jquery

Examples related to node.js

Examples related to html-table

Examples related to export-to-csv