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 the web application.  

Basically export means the 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 the server. It gets required data once on the client side and process as you want.

When to use data exporting in Web application:

Web application developed for administrative purpose where a large amount of data get added on daily basis.

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

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

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

Table 1: Buyer/User Details

Export HTML table data in excel using jQuery is one of the best approaches to implement, no need to use any jQuery plugins. On click of a button, the 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 used to get the heading in excel sheet after export.

Hidden column data export in excel:

In the 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 the table of rails view but comments should be exported to 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 the table of rails view.

After that, it will generate the downloadable URL.

In below line of code, you can provide the file name

filename = filename?filename+'.xls':'user_details.xls';

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

Table 2: Exported HTML User Details in Excel Format

Above is a 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!