Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Export dynamic html table to excel in javascript in firefox browser

Tags:

Want to Export dynamic html table to excel in javascript is there any way can i do do in firefox browser without using activex object in code .please help me

like image 247
Siddharth Avatar asked Aug 05 '11 11:08

Siddharth


People also ask

How do I export data from HTML table to Excel?

To convert HTML table data into excel, we need to use the SheetJS library. Using SheetJs we can easily convert our table data into an Xls file. We can download the js file from Github or directly use the CDN hosted file. We are done with HTML markup and import Sheetjs library.


2 Answers

Here's a function for doing this in Firefox with JavaScript, assuming the user has Excel installed on their machine:

var tableToExcel = (function() {   var uri = 'data:application/vnd.ms-excel;base64,'     , template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'     , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }     , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }   return function(table, name) {     if (!table.nodeType) table = document.getElementById(table)     var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}     window.location.href = uri + base64(format(template, ctx))   } })() 

jsFiddle live example:

  • http://jsfiddle.net/insin/cmewv/
like image 160
Jonny Buchanan Avatar answered Sep 28 '22 00:09

Jonny Buchanan


You can dynamically generate the Excel file in SpreadsheetDataXML format which allows you to custom the table, cell styles and format in HTML syntax.

To make this work in IE you'll need to use Blob object and then call msSaveBlob method. For FF and Chrome, you can just change the data of href to data:application/vnd.ms-excel

function fnExcelReport() {     var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';     tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';      tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';      tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';     tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';      tab_text = tab_text + "<table border='1px'>";     tab_text = tab_text + $('#myTable').html();     tab_text = tab_text + '</table></body></html>';      var data_type = 'data:application/vnd.ms-excel';      var ua = window.navigator.userAgent;     var msie = ua.indexOf("MSIE ");      if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {         if (window.navigator.msSaveBlob) {             var blob = new Blob([tab_text], {                 type: "application/csv;charset=utf-8;"             });             navigator.msSaveBlob(blob, 'Test file.xls');         }     } else {         $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));         $('#test').attr('download', 'Test file.xls');     } } 

Working example: http://jsfiddle.net/h42y4ke2/21/ YT tutorial: https://www.youtube.com/watch?v=gx_yGY6NHkc

like image 40
Tan Piyapat Avatar answered Sep 28 '22 00:09

Tan Piyapat