view.html
2.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('excel内容读取')" />
</head>
<body>
<div class="main-content">
<span>view.xlsx</span>
<div>
<ul class="nav nav-tabs" id="tab_id"></ul>
</div>
<div id="content_id" class="tab-content"></div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: xlsx-mini-js" />
<script>
var prefix = ctx + "eit/excel";
$(function() {
try {
let xhr = new XMLHttpRequest();
xhr.open('get', "/file/view.xlsx", true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (xhr.status == 200) {
let data = new Uint8Array(xhr.response)
let workbook = XLSX.read(data, { type: 'array' });
showWorkbook(workbook);
/**
let sheetNames = workbook.SheetNames;
let sheetName = sheetNames[0];
let worksheet = workbook.Sheets[sheetName];
let sheetHtml = XLSX.utils.sheet_to_html(worksheet);
$("#out").html(sheetHtml);
$("#out table").addClass("table table-bordered table-hover");
*/
}
};
xhr.send();
} catch (e) {
console.info(e);
}
function showWorkbook(workbook) {
let sheetNames = workbook.SheetNames;
let navHtml = '';
let tabHtml = '';
let myTabId = 'tab_id';
let tabContentId = 'content_id';
for (let index = 0; index < sheetNames.length; index++) {
let sheetName = sheetNames[index];
let worksheet = workbook.Sheets[sheetName];
let sheetHtml = XLSX.utils.sheet_to_html(worksheet);
let tabid = "tab" + "test" + "-" + index;
let xlsid = "xlsid" + "test" + "-" + index;
let active = index == 0 ? "active" : '';
navHtml += '<li class="nav-item"><a class="nav-link ' + active + '" href="#" data-target="#' + tabid + '" data-toggle="tab">' + sheetName + '</a></li>';
tabHtml += '<div id="' + tabid + '" class="tab-pane ' + active + '" style="padding:10px;overflow:auto;height:600px" >' +
'<div id="' + xlsid + '">' + sheetHtml + ' </div></div>';
}
$("#" + myTabId).html(navHtml);
$("#" + tabContentId).html(tabHtml);
$("#content_id table").addClass("table table-bordered table-hover");
}
});
</script>
</body>
</html>