Hello, I'm trying to create an HTML page for my webpage. I'm trying to create an HTML page for my website. Thanks.
Exporting an HTML table to PDF and EXCEL
-2
asked by anonymous 30.03.2016 / 14:40
2 answers
2
Is it better for me to do this in the javascript (front end) or in the (backend)?
It's best to do this on the back end for security reasons. A HTML page can be manipulated, and thus have its data manipulated. If you do this in the back end, you return the true values for the file to be exported, whatever the output format.
That said, I'll post a simple way to do this using jQuery.
<input type="button" id="btnExport" value=" Export Table data into Excel " />
<br/>
<br/>
<div id="dvData">
<table>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
</table>
</div>
<script>
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
e.preventDefault();
});
</script>
See a full example in this Fiddle.
If you want a full JavaScript example, this answer can help you.
There are some libraries that can do this too, such as ExcellentExport.js .
As in java, you can do as follows, by this answer.
Workbook wb = new HSSFWorkbook();
Sheet personSheet = wb.createSheet("PersonList");
Row headerRow = personSheet.createRow(0);
Cell nameHeaderCell = headerRow.createCell(0);
Cell addressHeaderCell = headerRow.createCell(1);
String sql = "select name, address from person_table";
PrepareStatement ps = connection.prepareStatement(sql);
ResultSet resultSet = ps.executeQuery();
int row = 1;
while(resultSet.next()) {
String name = resultSet.getString("name");
String address = resultSet.getString("address");
Row dataRow = personSheet.createRow(row);
Cell dataNameCell = dataRow.createCell(0);
dataNameCell.setCellValue(name);
Cell dataAddressCell = dataRow.createCell(1);
dataAddressCell.setCellValue(address);
row = row + 1;
}
String outputDirPath = "D:/PersonList.xls";
FileOutputStream fileOut = new FileOutputStream(outputDirPath);
wb.write(fileOut);
fileOut.close();
30.03.2016 / 15:03
4
Good morning, You may be using 2 jquery plugins, follow the example:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Export HTML table to Excel Format With Jquery- WSnippets.com</title>
<meta name="description" content="Export HTML table to Excel Format With Jquery- WSnippets.com" />
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><divclass="wrapper">
<div id="test">
<div class="wrapper">
<h2>WSnippets.com - Export HTML table to Excel Format With Jquery</h2>
<div id="dv">
<table id="tblExport" style="border:1px solid black; ">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color:red;'>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div>
<button id="btnExport">Export to excel</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><scriptsrc="jquery.btechco.excelexport.js"></script>
<script src="jquery.base64.js"></script>
<script>
$(document).ready(function () {
$("#btnExport").click(function () {
$("#tblExport").btechco_excelexport({
containerid: "tblExport"
, datatype: $datatype.Table
, filename: 'sample'
});
});
});
</script>
</body>
</html>
Follows a tutorial from the original author and the page contains the files to download.
30.03.2016 / 14:51