I was to export a handsontable to XLS file but i encountered this bug:
The result excel file contains 2 table like this:
First name Last name Email Phone Password
23123 31231231 213@dsfsd213.563 NjU0NTY0 46565465546
Buu Mr your@email.com MTI0NTU1 your password
First name Last name Email Phone Password
In the code box below is my code in jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="resources/handsontable/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="resources/handsontable/handsontable.full.css">
<link rel="stylesheet" media="screen" href="resources/handsontable/github.css">
<div class="tab-pane active" id="user">
<!-- <form action="addBatchUser" method="POST"> -->
<div class="col-lg-12">
<div class="page-header">
<h4>
<span>Export to Excel</span>
</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-lg-2 control-label">Parent Group</label>
<div class="col-lg-10">
<input type="text" readonly id="parentGroupUser" class="form-control uniform-input text focus"></input> <input
type="hidden" id="group-parent" name="groupou"></input>
</div>
</div>
<br />
<div class="form-group">
<!-- Space line -->
<div class="col-lg-12">
<div class="col-lg-2">
<label class="control-label"></label>
</div>
<div class="col-lg-10"></div>
</div>
<div class="col-lg-2">
<label class="control-label"></label>
</div>
<div class="col-lg-10">
<div id="example"></div>
<br /> <input type="button" value="Export" id="btnExport" class="btn btn-success" />
<div>
<img id="access_log_print" src="resources/images/ajax-loader.gif" />
</div>
</div>
</div>
</div>
</div>
<!-- </form> -->
</div>
<div id="resViewer"></div>
<script language="JavaScript" type="text/javascript">
$(document).ready(
function() {
$("#btnExport").click(
function(e) {
window.open('data:application/vnd.ms-excel,'
+ encodeURIComponent($('div[id$=example]')
.html()));
e.preventDefault();
});
});
$(document).ready(
function() {
hideLoadingMsg();
function showLoadingMsg() {
$("input[type=submit]").attr("disabled", "disabled");
$('#access_log_print').show();
}
function hideLoadingMsg() {
$("input[type=submit]").removeAttr("disabled");
$('#access_log_print').hide();
}
var data = ${listuser}
;
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data : data,
rowHeaders : false,
colHeaders : true,
// contextMenu : true,
colHeaders : [ 'First name', 'Last name', 'Email', 'Phone',
'Password' ],
colWidths : [ 130, 130, 150, 120, 130 ],
columns : [ {
data : "firstName",
readOnly : true
}, {
data : "lastName",
readOnly : true
}, {
data : "email",
readOnly : true
}, {
data : "telNumber",
readOnly : true
}, {
data : "password",
readOnly : true
} ]
});
// var hot ={}
// $("#save")
// .click(
// function() {
// var json = container
// .handsontable('getData');
// var jsonData = createJsonSection(json);
// if (jsonData === null) {
// return false;
// } else {
// showLoadingMsg();
// var dataJson = JSON
// .stringify(jsonData);
// console.log(dataJson);
// $
// .ajax({
// url : "addBatchUser",
// data : {
// "data" : dataJson,
// "groupou" : $(
// '#group-parent')
// .val(),
// "saveToLdap" : $(
// '#saveToLdap')
// .is(
// ':checked'),
// "saveToSvnAcm" : $(
// '#saveToSvnAcm')
// .is(
// ':checked'),
// "svnAcmGroup" : $(
// '#svnAcmGroup')
// .val()
// }, //returns all cells' data
// type : "POST",
// success : function(
// res) {
// $("#resViewer")
// .empty();
// $("#resViewer")
// .append(
// res);
// hideLoadingMsg();
// }
// });
// }
// });
});
</script>
