-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
97 lines (88 loc) · 5.95 KB
/
index.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<title>JHXLSX Export Library</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/xlsx.core.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jhxlsx.js"></script>
</head>
<body>
<div class="container bg-white">
<h2 class="text-center mb-3 mt-5 bg-danger text-white p-3">Export xlsx jquery</h2>
<p class="text-danger p-2 border">
JHXLSX is a library to download or create xlsx file using javascript. This library is fully dynamic we can merge and set styling on each cell.
</p>
<button class="btn btn-info btn-block" onclick="save()">Export xlsx Simple Sheet</button>
<button class="export-me btn btn-info btn-block" data-jsonfile="single-sheet.json">Export xlsx Single Sheet</button>
<button class="export-me btn btn-info btn-block" data-jsonfile="multiple-sheet.json">Export xlsx Multiple Sheet</button>
<button class="export-me btn btn-info btn-block" data-jsonfile="with-style.json">Export xlsx With Styles</button>
<button class="export-me btn btn-info btn-block" data-jsonfile="with-merge.json">Export xlsx With Merging Cell</button>
<button class="export-me btn btn-info btn-block" data-jsonfile="with-row-merge.json">Export xlsx With Merging Rows</button>
<button class="export-me btn btn-info btn-block" data-jsonfile="all-in-one.json">Export All In One</button>
<button class="btn btn-info btn-block" onclick="saveFileOnServer()">Save xlsx on Server</button>
<div class="text-center mt-5 bg-danger p-3">
<a href="https://www.youtube.com/channel/UC22awdP_T9YMQXwanStySow" class="ml-4 text-warning" target="_blank" title="Youtube"> <i class="fa fa-2x fa-youtube"></i></a>
<a href="mailto:skmaurya33@gmail.com" class="ml-4 text-warning" target="_blank" title="Email"><i class="fa fa-2x fa-envelope-open"></i></a>
<a href="https://github.com/skmaurya33" class="ml-4 text-warning" target="_blank" title="Guthub"><i class="fa fa-2x fa-github"></i></a>
<a href="https://plus.google.com/u/0/+SurajKumarMaurya" class="ml-4 text-warning" target="_blank" title="Guthub"><i class="fa fa-2x fa-google-plus"></i></a>
</div>
</div>
<script>
var dataTableStrForExcel;
$(function () {
$('.export-me').on('click', function () {
var url = 'json/' + $(this).data('jsonfile')+'?dt='+Math.random();
$.get(url, {}, function (data) {
Jhxlsx.export(data.tableData, data.options);
}).fail(function (jqXHR) {
alert("error: " + jqXHR.status + " / " + jqXHR.statusText);
});
});
});
var tableData = [
{
"sheetName": "Sheet1",
"data": [[{"text": "Name"}, {"text": "Position"}, {"text": "Office"}, {"text": "Age"}, {"text": "Start date"}, {"text": "Salary"}], [{"text": "Tiger Nixon"}, {"text": "System Architect"}, {"text": "Edinburgh"}, {"text": 61}, {"text": "2011/04/25"}, {"text": "$320,800"}], [{"text": "Garrett Winters"}, {"text": "Accountant"}, {"text": "Tokyo"}, {"text": 63}, {"text": "2011/07/25"}, {"text": "$170,750"}], [{"text": "Ashton Cox"}, {"text": "Junior Technical Author"}, {"text": "San Francisco"}, {"text": 66}, {"text": "2009/01/12"}, {"text": "$86,000"}], [{"text": "Cedric Kelly"}, {"text": "Senior Javascript Developer"}, {"text": "Edinburgh"}, {"text": 22}, {"text": "2012/03/29"}, {"text": "$433,060"}], [{"text": "Airi Satou"}, {"text": "Accountant"}, {"text": "Tokyo"}, {"text": 33}, {"text": "2008/11/28"}, {"text": "$162,700"}], [{"text": "Brielle Williamson"}, {"text": "Integration Specialist"}, {"text": "New York"}, {"text": 61}, {"text": "2012/12/02"}, {"text": "$372,000"}], [{"text": "Herrod Chandler"}, {"text": "Sales Assistant"}, {"text": "San Francisco"}, {"text": 59}, {"text": "2012/08/06"}, {"text": "$137,500"}], [{"text": "Rhona Davidson"}, {"text": "Integration Specialist"}, {"text": "Tokyo"}, {"text": 55}, {"text": "2010/10/14"}, {"text": "$327,900"}]]
}
];
function save() {
var options = {
fileName: "Export xlsx Simple Sheet"
};
dataTableStrForExcel = Jhxlsx.export(tableData, options);
}
function saveFileOnServer() {
var options = {
fileName: "Export xlsx Simple Sheet"
};
var xlsxBlobData = Jhxlsx.getBlob(tableData, options);
var formData = new FormData();
var fileName = 'Report.xlsx';
formData.append("file", xlsxBlobData, fileName);
//fd.append('file', new File([data], 'Report.xlsx'));
var url = 'upload.php';
$.ajax({
url: url,
type: "POST",
data: formData,
contentType: false,
processData: false,
}).done(function (response) {
console.log(response);
alert('file generated on server filePath:: uploads/'+fileName);
}).fail(function (jqXHR, textStatus) {
console.log(jqXHR);
}).always(function () {
console.log('Always');
});
}
</script>
</body>
</html>