Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Export HTML table to Excel - using jQuery or Java

I've a HTML table on my JSP page, that I want to be exported to Excel on a button click.

What would be the best way of going about this?

(For ex., how would I do this using may be a jQuery function?)

Any code examples for demo purposes should be great.

like image 972
Pritish Avatar asked Jul 08 '10 18:07

Pritish


People also ask

How do I Export a table from HTML 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.


5 Answers

I would recommend Apache POI, we've been using it for years, never had any problems.

Alot of examples online to get a good start, and the documentation on the site is also good: http://poi.apache.org/spreadsheet/quick-guide.html

like image 199
Tommy Avatar answered Oct 19 '22 11:10

Tommy


Rather export to CSV format. It's supported by Excel as well. Exporting to a fullworthy XLS(X) format using for example Apache POI HSSF or JExcepAPI is slow and memory hogging.

Exporting to CSV is relatively simple. You can find a complete code example in this answer.


As to exporting to files using JavaScript, this is not possible without interaction of Flash or the server side. In Flash there's as far only the Downloadify library which can export to simple txt files. Further, ExtJs seems to have a CSV export library, but I can't find any feasible demo page.

like image 35
BalusC Avatar answered Oct 19 '22 09:10

BalusC


You can parse the table using a library like http://jsoup.org/

After you get the data, you can store it in Excel-compatible format (CSV), or using Java Excel library for that like POI, or using JDBC to write data into Excel sheet, see this example: Password Protected Excel File

like image 22
Wajdy Essam Avatar answered Oct 19 '22 09:10

Wajdy Essam


I also spend lot of time to convert html to excel after lot of R & D i found following easiest way.

  1. create hidden field and in that pass your html data to your servlet or controller for e.g

    <form id="formexcel" action="" method="post" name="formexcel">
        <input type="hidden" name="exceldata" id="exceldata" value="" />
    </form>
    
  2. on your button of href click call following function and pass your html data using in document.formexcel.exceldata.value and your servlet or controller in document.formstyle.action

    function exportDivToExcel() {
        document.formexcel.exceldata.value=$('#htmlbody').html();
        $("#lblReportForPrint").html("Procurement operation review report");
        document.formstyle.method='POST';
        document.formstyle.action='${pageContext.servletContext.contextPath}/generateexcel';
        document.formstyle.submit();
    }
    
  3. Now in your controller or servlet write following code

    StringBuilder exceldata = new StringBuilder();
    exceldata.append(request.getParameter("exceldata"));
    ServletOutputStream outputStream = response.getOutputStream();
    response.setContentType("application/vnd.ms-excel");
    response.setCharacterEncoding("UTF-8");
    response.setHeader("Content-Disposition", "attachment;filename=\"exportexcel.xls\"");
    outputStream.write(exceldata.toString().getBytes());
    
like image 26
shrey Avatar answered Oct 19 '22 11:10

shrey


Excel can load CSV (comma-separated value) files, which are basically just files with everything that would go into separate Excel cells separated by comma.

I don't know enough about how jQuery can handle pushing information into a file that you would download, but it seems a jQuery library has been written that at least transforms html tables to CSV format, and it is here: http://www.kunalbabre.com/projects/table2CSV.php

Edit (February 29, 2016): You can use the table2csv implementation above in conjunction with FileSaver.js (which is a wrapper for the HTML5 W3C saveAs() spec).

The usage will end up looking something like:

var resultFromTable2CSV = $('#table-id').table2CSV({delivery:'value'});

var blob = new Blob([resultFromTable2CSV], {type: "text/csv;charset=utf-8"});

saveAs(blob, 'desiredFileName.csv');
like image 38
dmott Avatar answered Oct 19 '22 09:10

dmott