How do I export html table data as csv file

Question

I have a table of data in an html table on a website and need to know how to export that data as  csv file   How would this be done

User · Answer

I ve briefly covered a simple way to do this with Google Spreadsheets  importHTML  and in Python  Pandas read html and to csv  as well as an example Python script in my SO answer here  https   stackoverflow com a 28083469 1588795

User · Answer

Here is a really quick CoffeeScript jQuery example  csv      for row in     sometable tr     csv push       col innerText     for col in   row  find  td th    join      output   csv join   n

User · Answer

You could use an extension for Chrome  that works well the times I have tried it   https   chrome google com webstore search html 20table 20to 20csv  category extensions  When installed and on any web page with a table if you click on this extension s icon it shows all the tables in the page  highlighting each as you roll over the tables it lists  clicking allows you to copy it to the clipboard or save it to a Google Doc    It works perfectly for what I need  which is occasional conversion  of web based tabular data into a spreadsheet I can work with

User · Answer

For exporting html to csv try following this example   More details and examples are available at the  author s website   Create a html2csv js file and put the following code in it     jQuery fn table2CSV   function options        var options   jQuery extend           separator               header              delivery   popup     popup  value            options        var csvData           var headerArr           var el   this         header     var numCols   options header length      var tmpRow          construct header avalible array      if  numCols  gt  0            for  var i   0  i  lt  numCols  i                  tmpRow tmpRow length    formatData options header i                    else             el  filter   visible   find  th   each function                 if    this  css  display       none   tmpRow tmpRow length    formatData   this  html                            row2CSV tmpRow           actual data       el  find  tr   each function             var tmpRow                 this  filter   visible   find  td   each function                 if    this  css  display       none   tmpRow tmpRow length    formatData   this  html                         row2CSV tmpRow               if  options delivery     popup             var mydata   csvData join   n            return popup mydata         else           var mydata   csvData join   n            return mydata             function row2CSV tmpRow            var tmp   tmpRow join        to remove any blank rows            alert tmp           if  tmpRow length  gt  0  amp  amp  tmp                      var mystr   tmpRow join options separator               csvData csvData length    mystr                      function formatData input               replace   with             var regexp   new RegExp      g           var output   input replace regexp                    HTML         var regexp   new RegExp    lt     lt     gt  g           var output   output replace regexp               if  output        return             return       output                  function popup data            var generator   window open      csv    height 400 width 600            generator document write   lt html gt  lt head gt  lt title gt CSV lt  title gt             generator document write   lt  head gt  lt body  gt             generator document write   lt textArea cols 70 rows 15 wrap  off   gt             generator document write data           generator document write   lt  textArea gt             generator document write   lt  body gt  lt  html gt             generator document close            return true             include the js files into the html page like this    lt script type  text javascript  src  jquery-1 3 2 js   gt  lt  script gt    lt script type  text javascript  src  html2CSV js   gt  lt  script gt    TABLE    lt table id  example1  border  1   style  background-color  FFFFCC  width  0   cellpadding  3  cellspacing  3  gt        lt tr gt            lt th gt Title lt  th gt            lt th gt Name lt  th gt            lt th gt Phone lt  th gt        lt  tr gt        lt tr gt            lt td gt Mr  lt  td gt            lt td gt John lt  td gt            lt td gt 07868785831 lt  td gt        lt  tr gt        lt tr gt            lt td gt Miss lt  td gt            lt td gt  lt i gt Linda lt  i gt  lt  td gt            lt td gt 0141-2244-5566 lt  td gt        lt  tr gt        lt tr gt            lt td gt Master lt  td gt            lt td gt Jack lt  td gt            lt td gt 0142-1212-1234 lt  td gt        lt  tr gt        lt tr gt            lt td gt Mr  lt  td gt            lt td gt Bush lt  td gt            lt td gt 911-911-911 lt  td gt        lt  tr gt    lt  table gt    EXPORT BUTTON    lt input value  Export as CSV 2  type  button  onclick      example1   table2CSV  header   prefix   Employee Name   Contact      gt

User · Answer

The following solution can do it    x000D   x000D    function     x000D       button   on  click   function     x000D      var data       x000D      var tableData       x000D      var rows      table tr    x000D      rows each function index  row    x000D        var rowData       x000D          row  find  th  td   each function index  column    x000D          rowData push column innerText   x000D            x000D        tableData push rowData join        x000D          x000D      data    tableData join   n    x000D        document body  append   lt a id  download-link  download  data csv  href     URL createObjectURL new Blob  data     x000D        type   text csv  x000D               gt     x000D   x000D   x000D          download-link   0  click    x000D          download-link   remove    x000D        x000D      x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  td  x000D  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 script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  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 gt csv lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Thanks to gene tsai  here is some modifications to his code to run on my target page   csv      rows       data tr    for i  0 i  lt  rows length i          cells     rows i   find  td th        csv row           for  j 0 j lt cells length j              txt   cells j  innerText          csv row push txt replace       -               csv push csv row join          output   csv join   n     improvements    Use generic JavaScript for loop make sure each cell does not have a comma

User · Answer

I was able to use the answer outlined here  Export to CSV using jQuery and html and added in a modification to make it work in IE and another modification mentioned in the comments to grab the thead from the table   function exportTableToCSV  table  filename         var  rows    table find  tr has td  tr has th                 Temporary delimiter characters unlikely to be typed by keyboard            This is to avoid accidentally splitting the actual contents         tmpColDelim   String fromCharCode 11      vertical tab character         tmpRowDelim   String fromCharCode 0      null character             actual delimiter characters for CSV format         colDelim                  rowDelim      r n                Grab text from table into CSV formatted string         csv          rows map function  i  row                var  row     row    cols    row find  td th                 return  cols map function  j  col                    var  col     col   text    col text                     return text replace    g            escape double quotes                 get   join tmpColDelim               get   join tmpRowDelim               split tmpRowDelim  join rowDelim               split tmpColDelim  join colDelim                       Data URI         csvData    data application csv charset utf-8     encodeURIComponent csv            console log csv            if  window navigator msSaveBlob       IE 10                alert  IE    csv               window navigator msSaveOrOpenBlob new Blob  csv    type   text plain charset utf-8       csvname csv                      else                 this  attr    download   filename   href   csvData   target     blank                       This must be a hyperlink     xx   on  click   function  event         exportTableToCSV apply this       projectSpreadsheet     export csv             IF CSV  don t do event preventDefault   or return false        We actually need this to be a typical hyperlink       With my link looking like this      lt a href     id  xx  style  text-decoration none color  000 background-color  ddd border 1px solid  ccc padding 8px   gt Export Table data into Excel lt  a gt    JsFiddle  https   jsfiddle net mnsinger 65hqxygo

User · Answer

If it s an infrequent need  try one of several firefox addons which facilitate copying HTML table data to the clipboard  e g   https   addons mozilla org en-US firefox addon dafizilla-table2clipboard    For example  for the  table2clipboard  add-on    install the add-on in firefox open the web-page  with the table  in firefox right-click anywhere in the table and select  copy whole table  start up a spreadsheet application such as LibreOffice Calc paste into the spreadsheet  select appropriate separator character as needed  save export the spreadsheet as CSV

[html] How do I export html table data as .csv file?

Examples related to html

Examples related to parsing

Examples related to csv

Examples related to export

Examples related to export-to-csv