Export HTML Table Data into Excel Using jQuery in a Ruby on Rails Application

Export HTML Table Data into Excel Using jQuery in a Ruby on Rails Application Export data in html table is one of the most convenient features in Ruby on Rails web application.

Basically export means user can download the data in some format like Excel, PDF or CSV. Once the data get exported it can be used offline.

Nowadays most of the web applications process data easily without accessing the server continuously at client side itself. It becomes more user friendly in rapidly accessing data without interacting with server. It gets required data once on client side and process as you want.

When to use data exporting in Web application: Web application developed for administrative purpose where large amount of data get added on daily basis.

If you want to analyse data offline, exported data help you to create reports for future scope, what will be the next strategies to improve your business.

Data in tabular format most of the time is required to export.

Let’s take an example of buyers in an inventory management system, which contains buyer details.

Sr. No 1 2 3 4 5

Name Roney John Tale Martin Emily Sarah

Address 8806 Green Hill St. 7 Sherman Lane Massapequa Park 9872 Wagon Station Bayberry St. Lilburn

Mobile No 2025550125 2015489798 2215468763 2645498874 2016745162

Comment Roney is a student Professional Writer Sales Executive Graduate Housewife

Table 1: Buyer/User Details

Export html table data in excel using jQuery is one of the best approach to implement, no need to use any jQuery plugins. On click of button, user can easily download the data in excel format.

This document will help you to export table data in excel file format with column heading present in the table.

Below is the example of Rails view table code with “Export to Excel” button

Figure 1: Code for Export HTML Data into Excel

Tags used in rails view table <caption></caption> tag is use to get the heading in excel sheet after export.

Hidden column data export in excel In above table code if you add any hidden column names, still you can export data in excel.

For example, I have the comment column, I don’t want to display in table of rails view but comments should be exported in excel.

In that case, just add hidden <th></th> tag in header and body ( to hide <th> you can use display:none css ) of table, where you want in a sequence. <th class="text-center hidden-th">Comment</th>

After clicking on “Export To Excel” button hidden column data will export.

Javascript function to export data:

<script> function exportDataToExcel(table-id, filename = '') { var downloadurl; var fileType = 'application/vnd.ms-excel'; var tableSelect = document.getElementById(table-id); var dataHTML = tableSelect.outerHTML.replace(/ /g, '%20'); filename = filename?filename+'.xls':'user_details.xls'; downloadurl = document.createElement("a"); document.body.appendChild(downloadurl); if(navigator.msSaveOrOpenBlob) { var blob = new Blob(['\ufeff', dataHTML], { type: fileType }); navigator.msSaveOrOpenBlob( blob, filename); } else { downloadurl.href = 'data:' + fileType + ', ' + dataHTML; downloadurl.download = filename; downloadurl.click(); } } </script>

Above exportDataToExcel jQuery function will take the table id to get the data from table of rails view.

After that generate the downloadable URL, In below line of code you can provide file name filename = filename?filename+'.xls':'user_details.xls';

See the exported HTML user data in excel format in the given Table 1:

Table 2: Exported HTML User Details in Excel Format Above is simple way to export data easily in excelling format. Likewise you can export data in CSV and PDF format just mention the file type in for example: csvFile = new Blob([csv], {type: "text/csv"}); We can also customize the excel view and content as per requirement. Above is the simple and easiest way to implement data export in excelling format.

Hope, this blog helps you in your Ruby on Rails Application!