Export html table data to Excel using JavaScript JQuery is not working properly in chrome browser

Question

I have a HTML table in velocity template  I want to export the html table data to excel using either java script or jquery  comatibale with all browser   I am using below script    lt script type  text javascript  gt  function ExportToExcel mytblId          var htmltable  document getElementById  my-table-id           var html   htmltable outerHTML         window open  data application vnd ms-excel     encodeURIComponent html           lt  script gt    This script works fine in Mozilla Firefox it pops-up with a dialog box of excel and ask for open or save options  But when I tested same script in Chrome browser it is not working as expected when clicked on button there is no pop-up for excel  Data gets downloaded in a file with  file type   file    no extension like  xls There are no errors in chrome console   Jsfiddle example    http   jsfiddle net insin cmewv   This works fine in mozilla but not in chrome    Chrome browser Test Case    First Image I click on Export to excel button      and result

User · Answer

TableExport - The simple  easy-to-implement library to export HTML tables to xlsx  xls  csv  and txt files   To use this library  simple call the TableExport constructor   new TableExport document getElementsByTagName  table         OR simply  TableExport document getElementsByTagName  table         OR using jQuery     table   tableExport       Additional properties can be passed-in to customize the look and feel of your tables  buttons  and exported data  See here more info

User · Answer

You can use tableToExcel js to export table in excel file   This works in a following way    1   Include this CDN in your project file   lt script src  https   cdn jsdelivr net gh linways table-to-excel v1 0 4 dist tableToExcel js  gt  lt  script gt    2   Either Using JavaScript     lt button id  btnExport  onclick  exportReportToExcel this   gt EXPORT REPORT lt  button gt   function exportReportToExcel       let table   document getElementsByTagName  table       you can use document getElementById  tableId   as well by providing id to the table tag   TableToExcel convert table 0        html code may contain multiple tables so here we are refering to 1st table tag     name   export xlsx      fileName you could use any name     sheet          name   Sheet 1     sheetName                 3   Or by Using Jquery   lt button id  btnExport  gt EXPORT REPORT lt  button gt     document  ready function            btnExport   click function             let table   document getElementsByTagName  table            TableToExcel convert table 0        html code may contain multiple tables so here we are refering to 1st table tag            name   export xlsx      fileName you could use any name            sheet                  name   Sheet 1     sheetName                                        You may refer to this github link for any other information  https   github com linways table-to-excel tree master  or for referring the live example visit the following link  https   codepen io rohithb pen YdjVbb  Hope this will help someone  -

User · Answer

Instead of using window open you can use a link with the onclick event  And you can put the html table into the uri and set the file name to be downloaded   Live demo     x000D   x000D  function exportF elem    x000D    var table   document getElementById  table    x000D    var html   table outerHTML  x000D    var url    data application vnd ms-excel     escape html      Set your html table into url  x000D    elem setAttribute  href   url   x000D    elem setAttribute  download    export xls       Choose the file name x000D    return false  x000D    x000D   lt table id  table  border  1  gt  x000D     lt tr gt  x000D       lt td gt  x000D        Foo x000D       lt  td gt  x000D       lt td gt  x000D        Bar x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt a id  downloadLink  onclick  exportF this   gt Export to excel lt  a gt  x000D   x000D   x000D

User · Answer

Excel export script works on IE7   Firefox and Chrome   function fnExcelReport         var tab text   lt table border  2px  gt  lt tr bgcolor   87AFC6  gt        var textRange  var j 0      tab   document getElementById  headerTable       id of table      for j   0   j  lt  tab rows length   j                        tab text tab text tab rows j  innerHTML   lt  tr gt              tab text tab text   lt  tr gt               tab text tab text   lt  table gt        tab text  tab text replace   lt A   gt    gt   lt   A gt  g        remove if u want links in your table     tab text  tab text replace   lt img   gt    gt  gi         remove if u want images in your table     tab text  tab text replace   lt input   gt    gt   lt   input gt  gi          reomves input params      var ua   window navigator userAgent      var msie   ua indexOf  MSIE           if  msie  gt  0      navigator userAgent match  Trident  rv  11              If Internet Explorer               txtArea1 document open  txt html   replace            txtArea1 document write tab text           txtArea1 document close            txtArea1 focus             sa txtArea1 document execCommand  SaveAs  true  Say Thanks to Sumit xls                else                   other browser not tested on IE 11         sa   window open  data application vnd ms-excel     encodeURIComponent tab text           return  sa       Just create a blank iframe    lt iframe id  txtArea1  style  display none  gt  lt  iframe gt    Call this function on    lt button id  btnExport  onclick  fnExcelReport     gt  EXPORT  lt  button gt

User · Answer

Simplest way using Jquery Just add this   lt script src  quot https   cdn jsdelivr net gh linways table-to-excel v1 0 4 dist tableToExcel js quot  gt  lt  script gt   Then add Jquery script   lt script type  quot text javascript quot  gt      document  ready function               quot  exportBtn1 quot   click function            TableToExcel convert document getElementById  quot tab1 quot                  name   quot Traceability xlsx quot               sheet                name   quot Sheet1 quot                                                 lt  script gt   Then add HTML button   lt button id  quot exportBtn1 quot  gt Export To Excel lt  button gt  lt br gt  lt br gt   Note   quot exportBtn1 quot  will be button ID  and  quot tab1 quot  will be table ID

User · Answer

http   wsnippets com export-html-table-data-excel-sheet-using-jquery  try this link it might solve your problem

User · Answer

You can use a library like ShieldUI to do that    It supports exporting to both XML and XLSX widely-used Excel formats   More details here  http   demos shieldui com web grid-general export-to-excel

User · Answer

My version of  sampopes answer  function exportToExcel that  id  hasHeader  removeLinks  removeImages  removeInputParams    if  that    null    typeof that      undefined         console log  Sender is required        return false     if    that instanceof HTMLAnchorElement         console log  Sender must be an anchor element        return false     if  id    null    typeof id      undefined         console log  Table id is required        return false    if  hasHeader    null    typeof hasHeader      undefined         hasHeader   true    if  removeLinks    null    typeof removeLinks      undefined         removeLinks   true    if  removeImages    null    typeof removeImages      undefined         removeImages   false    if  removeInputParams    null    typeof removeInputParams      undefined         removeInputParams   true     var tab text     lt table border  2px  gt    var textRange   tab     id  get 0    if  tab    null    typeof tab      undefined         console log  Table not found        return     var j   0   if  hasHeader  amp  amp  tab rows length  gt  0        var row   tab rows 0       tab text      lt tr bgcolor   87AFC6  gt        for  var l   0  l  lt  row cells length  l              if    tab rows 0  cells l   is   visible       export visible cols only             tab text      lt td gt     row cells l  innerHTML     lt  td gt                        tab text      lt  tr gt        j       for    j  lt  tab rows length  j          var row   tab rows j       tab text      lt tr gt        for  var l   0  l  lt  row cells length  l              if    tab rows j  cells l   is   visible       export visible cols only             tab text      lt td gt     row cells l  innerHTML     lt  td gt                        tab text      lt  tr gt       tab text   tab text     lt  table gt    if  removeLinks      tab text   tab text replace   lt A   gt    gt   lt   A gt  g       if  removeImages      tab text   tab text replace   lt img   gt    gt  gi        if  removeInputParams      tab text   tab text replace   lt input   gt    gt   lt   input gt  gi        var ua   window navigator userAgent  var msie   ua indexOf  MSIE      if  msie  gt  0      navigator userAgent match  Trident  rv  11              If Internet Explorer       myIframe document open  txt html    replace        myIframe document write tab text       myIframe document close        myIframe focus        sa   myIframe document execCommand  SaveAs   true  document title     xls        return true    else         other browser tested on IE 11     var result    data application vnd ms-excel     encodeURIComponent tab text       that href   result      that download   document title     xls       return true        Requires an iframe   lt iframe id  myIframe  style  opacity  0  width  100   height  0px   seamless  seamless  gt  lt  iframe gt    Usage      btnExportToExcel   click function          exportToExcel this    mytable

User · Answer

Regarding to sampopes answer from Jun 6  14 at 11 59   I have insert a css style with font-size of 20px to display the excel data greater  In sampopes code the leading  lt tr gt  tags are missing  so i first output the headline and than the other tables lines within a loop   function fnExcelReport         var tab text     lt table border  1px  style  font-size 20px    gt        var textRange       var j   0      var tab   document getElementById  DataTableId       id of table     var lines   tab rows length          the first headline of the table     if  lines  gt  0            tab text   tab text     lt tr bgcolor   DFDFDF  gt     tab rows 0  innerHTML     lt  tr gt                  table data lines  loop starting from 1     for  j   1   j  lt  lines  j                   tab text   tab text     lt tr gt     tab rows j  innerHTML     lt  tr gt               tab text   tab text     lt  table gt        tab text   tab text replace   lt A   gt    gt   lt   A gt  g                     remove if u want links in your table     tab text   tab text replace   lt img   gt    gt  gi                         remove if u want images in your table     tab text   tab text replace   lt input   gt    gt   lt   input gt  gi             reomves input params        console log tab text      aktivate so see the result  press F12 in browser       var ua   window navigator userAgent      var msie   ua indexOf  MSIE               if Internet Explorer     if  msie  gt  0      navigator userAgent match  Trident  rv  11                txtArea1 document open  txt html   replace            txtArea1 document write tab text           txtArea1 document close            txtArea1 focus             sa   txtArea1 document execCommand  SaveAs   true   DataTableExport xls                else    other browser not tested on IE 11         sa   window open  data application vnd ms-excel     encodeURIComponent tab text           return  sa

User · Answer

This could help  function exportToExcel    var htmls                   var uri    data application vnd ms-excel base64                var template     lt html xmlns o  urn schemas-microsoft-com office office  xmlns x  urn schemas-microsoft-com office excel  xmlns  http   www w3 org TR REC-html40  gt  lt head gt  lt  -- if gte mso 9  gt  lt xml gt  lt x ExcelWorkbook gt  lt x ExcelWorksheets gt  lt x ExcelWorksheet gt  lt x Name gt  worksheet  lt  x Name gt  lt x WorksheetOptions gt  lt x DisplayGridlines  gt  lt  x WorksheetOptions gt  lt  x ExcelWorksheet gt  lt  x ExcelWorksheets gt  lt  x ExcelWorkbook gt  lt  xml gt  lt   endif -- gt  lt  head gt  lt body gt  lt table gt  table  lt  table gt  lt  body gt  lt  html gt                 var base64   function s                    return window btoa unescape encodeURIComponent s                                var format   function s  c                    return s replace     w    g  function m  p                        return c p                                                  htmls    YOUR HTML AS TABLE               var ctx                     worksheet    Worksheet                   table   htmls                             var link   document createElement  a                link download    export xls               link href   uri   base64 format template  ctx                link click

User · Answer

My merge of these examples   https   www codexworld com export-html-table-data-to-excel-using-javascript https   bl ocks org Flyer53 1de5a78de9c89850999c  function exportTableToExcel tableId  filename        let dataType    application vnd ms-excel       let extension     xls        let base64   function s            return window btoa unescape encodeURIComponent s                let template     lt html xmlns o  urn schemas-microsoft-com office office  xmlns x  urn schemas-microsoft-com office excel  xmlns  http   www w3 org TR REC-html40  gt  lt head gt  lt  -- if gte mso 9  gt  lt xml gt  lt x ExcelWorkbook gt  lt x ExcelWorksheets gt  lt x ExcelWorksheet gt  lt x Name gt  worksheet  lt  x Name gt  lt x WorksheetOptions gt  lt x DisplayGridlines  gt  lt  x WorksheetOptions gt  lt  x ExcelWorksheet gt  lt  x ExcelWorksheets gt  lt  x ExcelWorkbook gt  lt  xml gt  lt   endif -- gt  lt  head gt  lt body gt  lt table gt  table  lt  table gt  lt  body gt  lt  html gt        let render   function template  content            return template replace     w    g  function m  p    return content p                   let tableElement   document getElementById tableId        let tableExcel   render template            worksheet  filename          table  tableElement innerHTML              filename   filename   extension       if  navigator msSaveOrOpenBlob                let blob   new Blob                  ufeff   tableExcel                  type  dataType                       navigator msSaveOrOpenBlob blob  filename         else           let downloadLink   document createElement  a             document body appendChild downloadLink            downloadLink href    data     dataType     base64     base64 tableExcel            downloadLink download   filename           downloadLink click

User · Answer

Datatable plugin solves the purpose best and allows us to export the HTML table data into Excel   PDF   TEXT  easily configurable   Please find the complete example in below datatable reference link    https   datatables net extensions buttons examples html5 simple html   screenshot from datatable reference site

User · Answer

Very Easy Code Follow this instruction Create excel php file in your localhost root directory and copy and past this code  Like this http   localhost excel php fileName excelfile amp link 1  lt  -- http   localhost excel php fileName excelfile amp link 2 -- gt    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Export excel file from html table lt  title gt   lt  head gt   lt body style  quot display   lt  php  if    REQUEST  link      1        echo  none       gt    quot  gt    lt  -- --------Optional-------- -- gt  Excel  lt input type  quot radio quot  value  quot 1 quot  name  quot exportFile quot  gt  Others  lt input type  quot radio quot  value  quot 2 quot  name  quot exportFile quot  gt   lt button onclick  quot myFunction   quot  gt Download lt  button gt   lt br gt   lt br gt   lt  -- -------- Optional-------- -- gt    lt table width  quot 100  quot  id  quot tblData quot  gt       lt tbody gt           lt tr gt               lt th gt Student Name lt  th gt               lt th gt Group lt  th gt               lt th gt Roll No  lt  th gt               lt th gt Class lt  th gt               lt th gt Contact No lt  th gt           lt  tr gt           lt tr gt               lt td gt Bulbul Sarker lt  td gt               lt td gt Science lt  td gt               lt td gt 1 lt  td gt               lt td gt Nine lt  td gt               lt td gt 01724     lt  td gt           lt  tr gt           lt tr gt               lt td gt Karim lt  td gt               lt td gt Science lt  td gt               lt td gt 3 lt  td gt               lt td gt Nine lt  td gt               lt td gt 0172444    lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    lt  body gt   lt  html gt    lt style gt      table tblData          border-collapse  collapse             tblData th       tblData td          border 1px solid  CCC          text-align  center         lt  style gt    lt script type  quot text javascript quot  gt         --------Optional--------       function myFunction             let val   document querySelector  input name  quot exportFile quot   checked   value               if val    1                        this exportTableToExcel                          -------- Optional--------        function exportTableToExcel            let filename2    quot  lt  php echo   REQUEST  fileName      gt  quot           let tableId    tblData            var downloadLink          var dataType    application vnd ms-excel           var tableSelect   document getElementById tableId           var tableHTML   tableSelect outerHTML replace    g    20                    Specify file name             let filename   filename2 filename2   xls   excel data xls                   Create download link element             downloadLink   document createElement  quot a quot                 document body appendChild downloadLink                if navigator msSaveOrOpenBlob                   var blob   new Blob    ufeff   tableHTML                         type  dataType                                     navigator msSaveOrOpenBlob  blob  filename                else                 Create a link to the file             downloadLink href    data     dataType          tableHTML                  Setting the file name             downloadLink download   filename                 triggering the function             downloadLink click                            lt  script gt    lt  php if    REQUEST  link      1               echo   lt script type  quot text javascript quot  gt      exportTableToExcel         lt  script gt         gt

User · Answer

x000D   x000D   function exportToExcel     x000D          var tab text     lt tr bgcolor   87AFC6  gt    x000D          var textRange  var j   0  rows       x000D          tab   document getElementById  student-detail    x000D          tab text   tab text   tab rows 0  innerHTML     lt  tr gt    x000D          var tableData       student-detail   DataTable   rows   data    x000D          for  var i   0  i  lt  tableData length  i      x000D              rows      lt tr gt   x000D                      lt td gt     tableData i  value1     lt  td gt   x000D                      lt td gt     tableData i  value2     lt  td gt   x000D                      lt td gt     tableData i  value3     lt  td gt   x000D                      lt td gt     tableData i  value4     lt  td gt   x000D                      lt td gt     tableData i  value5     lt  td gt   x000D                      lt td gt     tableData i  value6     lt  td gt   x000D                      lt td gt     tableData i  value7     lt  td gt   x000D                      lt td gt      tableData i  value8     lt  td gt   x000D                      lt td gt     tableData i  value9     lt  td gt   x000D                      lt td gt     tableData i  value10     lt  td gt   x000D                      lt  tr gt    x000D            x000D          tab text    rows  x000D          var data type    data application vnd ms-excel base64    x000D              template     lt html xmlns o  urn schemas-microsoft-com office office  xmlns x  urn schemas-microsoft-com office excel  xmlns  http   www w3 org TR REC-html40  gt  lt head gt  lt  -- if gte mso 9  gt  lt xml gt  lt x ExcelWorkbook gt  lt x ExcelWorksheets gt  lt x ExcelWorksheet gt  lt x Name gt  worksheet  lt  x Name gt  lt x WorksheetOptions gt  lt x DisplayGridlines  gt  lt  x WorksheetOptions gt  lt  x ExcelWorksheet gt  lt  x ExcelWorksheets gt  lt  x ExcelWorkbook gt  lt  xml gt  lt   endif -- gt  lt  head gt  lt body gt  lt table border  2px  gt  table  lt  table gt  lt  body gt  lt  html gt    x000D              base64   function  s    x000D                  return window btoa unescape encodeURIComponent s    x000D                 x000D              format   function  s  c    x000D                  return s replace     w    g  function  m  p    x000D                      return c p   x000D                     x000D                x000D   x000D          var ctx     x000D              worksheet   Sheet 1      Worksheet   x000D              table  tab text x000D            x000D          document getElementById  dlink   href   data type   base64 format template  ctx    x000D          document getElementById  dlink   download    StudentDetails xls   x000D          document getElementById  dlink   traget     blank   x000D          document getElementById  dlink   click    x000D        x000D   x000D   x000D    Here Value 1 to 10 are column names that you are getting

[javascript] Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to excel

Examples related to google-chrome