1 | <!DOCTYPE html>
|
2 | <html lang='en'>
|
3 |
|
4 | <head>
|
5 | <title>Object-Exporter Example Page</title>
|
6 | <meta charset='UTF-8'>
|
7 | <meta name='viewport' content='width=device-width, initial-scale=1'>
|
8 | <link rel="shortcut icon" href="#" />
|
9 | <link rel='stylesheet' href='lib/css/bootstrap.min.css'>
|
10 | <a href='https://github.com/gharibi/JsObjExporter'><img style='position: absolute; top: 0; right: 0; border: 0;'
|
11 | src='https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png' alt='Fork me on GitHub'></a>
|
12 | <script src='../dist/objectexporter.min.js'></script>
|
13 | <script src='lib/jquery-3.3.1.slim.min.js'></script>
|
14 | <script src='lib/popper.min.js'></script>
|
15 | <script src='lib/js/bootstrap.min.js'></script>
|
16 | <script>
|
17 | function object2xls() {
|
18 |
|
19 |
|
20 | var numberOfColumnsInXls = document.getElementById('numberOfColumnsInXls').value;
|
21 | var numberOfRecordsInXls = document.getElementById('numberOfRecordsInXls').value;
|
22 | var sheetNameInXls = document.getElementById('sheetNameInXls').value;
|
23 | var contentsStyleInXls = document.getElementById('contentsStyleInXls').value;
|
24 |
|
25 |
|
26 | var data = [];
|
27 | for (var i = 0; i < numberOfRecordsInXls; i++) {
|
28 | var rowData = {};
|
29 | for (var j = 0; j <= numberOfColumnsInXls; j++) {
|
30 | rowData['header_' + j] = createRandomString();
|
31 | }
|
32 | data.push(rowData);
|
33 | }
|
34 |
|
35 |
|
36 | var headers = [];
|
37 | for (var k = 0; k < numberOfColumnsInXls; k++) {
|
38 | headers.push({
|
39 | alias: 'header ' + k,
|
40 | name: 'header_' + k,
|
41 | flex: 1
|
42 | });
|
43 | }
|
44 |
|
45 |
|
46 | objectExporter({
|
47 | type: 'xls',
|
48 | documentTitle: document.getElementById('documentTitleInXls').value,
|
49 | documentTitleStyle: document.getElementById('documentTitleStyleInXls').value,
|
50 | exportable: data,
|
51 | headers: headers,
|
52 | fileName: 'sample_excel',
|
53 | headerStyle: 'font-size:16px; font-weight:bold;',
|
54 | cellStyle: contentsStyleInXls,
|
55 | sheetName: sheetNameInXls
|
56 | })
|
57 | }
|
58 |
|
59 | function object2csv() {
|
60 |
|
61 |
|
62 | var numberOfColumnsInCsv = document.getElementById('numberOfColumnsInCsv').value;
|
63 | var numberOfRecordsInCsv = document.getElementById('numberOfRecordsInCsv').value;
|
64 | var columnSeperatorInCsv = document.getElementById('columnSeperatorInCsv').value;
|
65 |
|
66 |
|
67 | var data = [];
|
68 | for (var i = 0; i < numberOfRecordsInCsv; i++) {
|
69 | var rowData = {};
|
70 | for (var j = 0; j < numberOfColumnsInCsv; j++) {
|
71 | rowData['header_' + j] = createRandomString();
|
72 | }
|
73 | data.push(rowData);
|
74 | }
|
75 |
|
76 |
|
77 | var headers = [];
|
78 | for (var k = 0; k < numberOfColumnsInCsv; k++) {
|
79 | headers.push({
|
80 | alias: 'header ' + k,
|
81 | name: 'header_' + k
|
82 | });
|
83 | }
|
84 |
|
85 |
|
86 | objectExporter({
|
87 | type: 'csv',
|
88 | exportable: data,
|
89 | headers: headers,
|
90 | columnSeparator: columnSeperatorInCsv
|
91 | })
|
92 | }
|
93 |
|
94 | function object2pdf() {
|
95 |
|
96 |
|
97 | var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInPdf').value;
|
98 | var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInPdf').value;
|
99 |
|
100 |
|
101 | var data = [];
|
102 | for (var i = 0; i <= numberOfRecordsInPdf; i++) {
|
103 | var rowData = {};
|
104 | for (var j = 0; j < numberOfColumnsInPdf; j++) {
|
105 | rowData['header_' + j] = createRandomString();
|
106 | }
|
107 | data.push(rowData);
|
108 | }
|
109 |
|
110 |
|
111 | var headers = [];
|
112 | for (var k = 0; k < numberOfColumnsInPdf; k++) {
|
113 | headers.push({
|
114 | alias: 'header ' + k,
|
115 | name: 'header_' + k,
|
116 | flex: 1
|
117 | });
|
118 | }
|
119 |
|
120 |
|
121 | objectExporter({
|
122 | type: 'pdf',
|
123 | exportable: data,
|
124 | headers: headers,
|
125 | fileName: 'sample_excel',
|
126 | headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
|
127 | cellStyle: 'border: 1px solid lightgray; margin-bottom: -1px;'
|
128 | })
|
129 | }
|
130 |
|
131 | function object2doc() {
|
132 |
|
133 |
|
134 | var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInDoc').value;
|
135 | var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInDoc').value;
|
136 |
|
137 |
|
138 | var data = [];
|
139 | for (var i = 0; i <= numberOfRecordsInPdf; i++) {
|
140 | var rowData = {};
|
141 | for (var j = 0; j < numberOfColumnsInPdf; j++) {
|
142 | rowData['header_' + j] = createRandomString();
|
143 | }
|
144 | data.push(rowData);
|
145 | }
|
146 |
|
147 |
|
148 | var headers = [];
|
149 | for (var k = 0; k < numberOfColumnsInPdf; k++) {
|
150 | headers.push({
|
151 | alias: 'header ' + k,
|
152 | name: 'header_' + k,
|
153 | flex: 1
|
154 | });
|
155 | }
|
156 |
|
157 |
|
158 | objectExporter({
|
159 | type: 'doc',
|
160 | exportable: data,
|
161 | headers: headers,
|
162 | fileName: 'sample_doc',
|
163 | headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
|
164 | cellStyle: 'padding: 5px; border: 1px solid #dddddd;'
|
165 | })
|
166 | }
|
167 |
|
168 | function createRandomString() {
|
169 | var text = '';
|
170 | var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
171 | for (var i = 0; i < 5; i++)
|
172 | text += possible.charAt(Math.floor(Math.random() * possible.length));
|
173 | return text;
|
174 | }
|
175 |
|
176 |
|
177 | window.onload = function () {
|
178 | document.getElementById('object2xlsBtnId').onclick = function click() {
|
179 | object2xls();
|
180 | }
|
181 | document.getElementById('object2csvBtnId').onclick = function click() {
|
182 | object2csv();
|
183 | }
|
184 | document.getElementById('object2pdfBtnId').onclick = function click() {
|
185 | object2pdf();
|
186 | }
|
187 | document.getElementById('object2docBtnId').onclick = function click() {
|
188 | object2doc();
|
189 | }
|
190 | document.getElementById('html2pdfBtnId').onclick = function click() {
|
191 |
|
192 |
|
193 | objectExporter({
|
194 | type: 'html',
|
195 | exportable: document.getElementById('domId').value
|
196 | })
|
197 | }
|
198 | }
|
199 | </script>
|
200 | <div class='container'>
|
201 | <div class="jumbotron">
|
202 | <h2>Object-Exporter Example Page</h2>
|
203 | <p>Below 5 examples illustrate how this plugin exports the randomly generated object to XLS, CSV, PDF, DOC and
|
204 | only from the frontend and without any communication to the backend!
|
205 | </p>
|
206 | </div>
|
207 | <div class='row' id="html2pdfId">
|
208 | <div class='col'>
|
209 | <h3>JsObj to XLS</h3>
|
210 | <p>Please adjust the below inputs to generate a sample object and export it to XLS format:</p>
|
211 | <div class='container'>
|
212 | <div class='form-group'>
|
213 | <label>Number of columns in xls sheet</label>
|
214 | <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInXls'>
|
215 | </div>
|
216 | <div class='form-group'>
|
217 | <label>Number of records in xls sheet</label>
|
218 | <input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInXls'>
|
219 | </div>
|
220 | <div class='form-group'>
|
221 | <label>Worksheet Name</label>
|
222 | <input type='text' class='form-control form-control-lg' value='Sample Worksheet' id='sheetNameInXls'>
|
223 | </div>
|
224 | <div class='form-group'>
|
225 | <label>Contents style</label>
|
226 | <input type='text' class='form-control form-control-lg' value='color:#8866ff;' id='contentsStyleInXls'>
|
227 | </div>
|
228 | <div class='form-group'>
|
229 | <label>Content Title</label>
|
230 | <input type='text' class='form-control form-control-lg' value='Sample dataset' id='documentTitleInXls'>
|
231 | </div>
|
232 | <div class='form-group'>
|
233 | <label>Content Style</label>
|
234 | <input type='text' class='form-control form-control-lg' value='color:#000; font-size: 14;'
|
235 | id='documentTitleStyleInXls'>
|
236 | </div>
|
237 | <input type='button' class='btn btn-info' value='Generate XLS' id='object2xlsBtnId'>
|
238 | </div>
|
239 | </div>
|
240 | <div class='col'>
|
241 | <h3>JsObj to CSV</h3>
|
242 | <p>Please adjust the below inputs to generate a sample object and export it to CSV format:</p>
|
243 | <div class='container'>
|
244 | <div class='form-group'>
|
245 | <label>Number of columns in CSV file</label>
|
246 | <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInCsv'>
|
247 | </div>
|
248 | <div class='form-group'>
|
249 | <label>Number of records in CSV</label>
|
250 | <input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInCsv'>
|
251 | </div>
|
252 | <div class='form-group'>
|
253 | <label>Column Seperator in CSV</label>
|
254 | <input type='text' class='form-control form-control-lg' value=',' id='columnSeperatorInCsv'>
|
255 | </div>
|
256 | <input type='button' class='btn btn-info' value='Generate CSV' id='object2csvBtnId'>
|
257 | </div>
|
258 | </div>
|
259 | <div class='col'>
|
260 | <h3>JsObj to PDF</h3>
|
261 | <p>Please adjust the below inputs to generate a sample PDF file:</p>
|
262 | <div class='container'>
|
263 | <div class='form-group'>
|
264 | <label>Number of columns in PDF file</label>
|
265 | <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInPdf'>
|
266 | </div>
|
267 | <div class='form-group'>
|
268 | <label>Number of records in PDF</label>
|
269 | <input type='text' class='form-control form-control-lg' value=300 id='numberOfRecordsInPdf'>
|
270 | </div>
|
271 | <input type='button' class='btn btn-info' value='Generate PDF' id='object2pdfBtnId'>
|
272 | </div>
|
273 | </div>
|
274 | <div class='col'>
|
275 | <h3>JsObj to DOC</h3>
|
276 | <p>Please adjust the below inputs to generate a sample DOC file:</p>
|
277 | <div class='container'>
|
278 | <div class='form-group'>
|
279 | <label>Number of columns in DOC file</label>
|
280 | <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInDoc'>
|
281 | </div>
|
282 | <div class='form-group'>
|
283 | <label>Number of records in DOC</label>
|
284 | <input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInDoc'>
|
285 | </div>
|
286 | <input type='button' class='btn btn-info' value='Generate DOC' id='object2docBtnId'>
|
287 | </div>
|
288 | </div>
|
289 | <div class='col' id="test">
|
290 | <h3>HTML to PDF</h3>
|
291 | <p>Please adjust the below input to generate a sample PDF file:</p>
|
292 | <div class='container'>
|
293 | <div class='form-group'>
|
294 | <label>DOM Id:</label>
|
295 | <input type='text' class='form-control form-control-lg' value='html2pdfId' id='domId'>
|
296 | </div>
|
297 | <input type='button' class='btn btn-info' value='Generate PDF' id='html2pdfBtnId'>
|
298 | </div>
|
299 | </div>
|
300 | </div>
|
301 | </div>
|
302 | </head>
|
303 |
|
304 | </html> |
\ | No newline at end of file |