UNPKG

object-exporter/examples/example.html

Version:

1<!DOCTYPE html>
2<html lang='en'>
3
4<head>
<title>Object-Exporter Example Page</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" href="#" />
<link rel='stylesheet' href='lib/bootstrap.min.css'>
<a href='https://github.com/gharibi/JsObjExporter'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png'
    alt='Fork me on GitHub'></a>
<script src='../dist/objectexporter.min.js'></script>
<script src='lib/jquery-3.3.1.slim.min.js'></script>
<script src='lib/popper.min.js'></script>
<script src='lib/bootstrap.min.js'></script>
<script>
  function object2xls() {
18
    // Retrieve the user inputs
    var numberOfColumnsInXls = document.getElementById('numberOfColumnsInXls').value;
    var numberOfRecordsInXls = document.getElementById('numberOfRecordsInXls').value;
    var sheetNameInXls = document.getElementById('sheetNameInXls').value;
    var contentsStyleInXls = document.getElementById('contentsStyleInXls').value;
24
    // Construct the dataset for xls
    var data = [];
    for (var i = 0; i < numberOfRecordsInXls; i++) {
      var rowData = {};
      for (var j = 0; j <= numberOfColumnsInXls; j++) {
        rowData['header_' + j] = createRandomString();
      }
      data.push(rowData);
    }
34
    // Construct the headers for the xls
    var headers = [];
    for (var k = 0; k < numberOfColumnsInXls; k++) {
      headers.push({
        alias: 'header ' + k,
        name: 'header_' + k,
        flex: 1
      });
    }
44
    // Generate the xls
    objectExporter({
      type: 'xls',
      documentTitle: document.getElementById('documentTitleInXls').value,
      documentTitleStyle: document.getElementById('documentTitleStyleInXls').value,
      exportable: data,
      headers: headers,
      fileName: 'sample_excel',
      headerStyle: 'font-size:16px; font-weight:bold;',
      cellStyle: contentsStyleInXls,
      sheetName: sheetNameInXls
    })
  }
58
  function object2csv() {
60
    // Retrieve the user inputs
    var numberOfColumnsInCsv = document.getElementById('numberOfColumnsInCsv').value;
    var numberOfRecordsInCsv = document.getElementById('numberOfRecordsInCsv').value;
64
    // Construct the dataset for CSV
    var data = [];
    for (var i = 0; i < numberOfRecordsInCsv; i++) {
      var rowData = {};
      for (var j = 0; j < numberOfColumnsInCsv; j++) {
        rowData['header_' + j] = createRandomString();
      }
      data.push(rowData);
    }
74
    // Construct the headers for the CSV
    var headers = [];
    for (var k = 0; k < numberOfColumnsInCsv; k++) {
      headers.push({
        alias: 'header ' + k,
        name: 'header_' + k
      });
    }
83
    // Construct the headers for the CSV
    objectExporter({
      type: 'csv',
      exportable: data,
      headers: headers
    })
  }
91
  function object2pdf() {
93
    // Retrieve the user inputs
    var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInPdf').value;
    var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInPdf').value;
97
    // Construct the dataset for Pdf
    var data = [];
    for (var i = 0; i <= numberOfRecordsInPdf; i++) {
      var rowData = {};
      for (var j = 0; j < numberOfColumnsInPdf; j++) {
        rowData['header_' + j] = createRandomString();
      }
      data.push(rowData);
    }
107
    // Construct the headers for the Pdf
    var headers = [];
    for (var k = 0; k < numberOfColumnsInPdf; k++) {
      headers.push({
        alias: 'header ' + k,
        name: 'header_' + k,
        flex: 1
      });
    }
    
    // Generate the Pdf
    objectExporter({
      type: 'pdf',
      exportable: data,
      headers: headers,
      fileName: 'sample_excel',
      headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
      cellStyle: 'border: 1px solid lightgray; margin-bottom: -1px;'
    })
  }
128
  function object2doc() {
130
    // Retrieve the user inputs
    var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInDoc').value;
    var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInDoc').value;
134
    // Construct the dataset for Doc
    var data = [];
    for (var i = 0; i <= numberOfRecordsInPdf; i++) {
      var rowData = {};
      for (var j = 0; j < numberOfColumnsInPdf; j++) {
        rowData['header_' + j] = createRandomString();
      }
      data.push(rowData);
    }
144
    // Construct the headers for the Doc
    var headers = [];
    for (var k = 0; k < numberOfColumnsInPdf; k++) {
      headers.push({
        alias: 'header ' + k,
        name: 'header_' + k,
        flex: 1
      });
    }
154
    // Generate the Pdf
    objectExporter({
      type: 'doc',
      exportable: data,
      headers: headers,
      fileName: 'sample_doc',
      headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
      cellStyle: 'padding: 5px; border: 1px solid #dddddd;'
    })
  }
  
  function createRandomString() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (var i = 0; i < 5; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
  }
173
  // Add the eventListeners for the buttons
  window.onload = function () {
    document.getElementById('object2xlsBtnId').onclick = function click() {
      object2xls();
    }
    document.getElementById('object2csvBtnId').onclick = function click() {
      object2csv();
    }
    document.getElementById('object2pdfBtnId').onclick = function click() {
      object2pdf();
    }
    document.getElementById('object2docBtnId').onclick = function click() {
      object2doc();
    }
  }
</script>
<div class='container'>
  <div class="jumbotron">
    <h2>Object-Exporter Example Page</h2>
    <p>Below 4 examples illustrate how this plugin generates XLS, CSV, PDF and DOC only from
      the frontend and without any communication to the backend!
    </p>
  </div>
  <div class='row'>
    <div class='col-sm-3'>
      <h3>export to XLS</h3>
      <p>Please adjust the below inputs to generate a sample object and export it to XLS format:</p>
      <div class='container'>
        <div class='form-group'>
          <label>Number of columns in xls sheet</label>
          <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInXls'>
        </div>
        <div class='form-group'>
          <label>Number of records in xls sheet</label>
          <input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInXls'>
        </div>
        <div class='form-group'>
          <label>Worksheet Name</label>
          <input type='text' class='form-control form-control-lg' value='Sample Worksheet' id='sheetNameInXls'>
        </div>
        <div class='form-group'>
          <label>Contents style</label>
          <input type='text' class='form-control form-control-lg' value='color:#8866ff;' id='contentsStyleInXls'>
        </div>
        <div class='form-group'>
          <label>Content Title</label>
          <input type='text' class='form-control form-control-lg' value='Sample dataset;' id='documentTitleInXls'>
        </div>
        <div class='form-group'>
          <label>Content Style</label>
          <input type='text' class='form-control form-control-lg' value='color:#000; font-size: 14;' id='documentTitleStyleInXls'>
        </div>
        <input type='button' class='btn btn-info' value='Generate XLS' id='object2xlsBtnId'>
      </div>
    </div>
    <div class='col-sm-3'>
      <h3>export to CSV</h3>
      <p>Please adjust the below inputs to generate a sample object and export it to CSV format:</p>
      <div class='container'>
        <div class='form-group'>
          <label>Number of columns in CSV file</label>
          <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInCsv'>
        </div>
        <div class='form-group'>
          <label>Number of records in CSV</label>
          <input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInCsv'>
        </div>
        <input type='button' class='btn btn-info' value='Generate CSV' id='object2csvBtnId'>
      </div>
    </div>
    <div class='col-sm-3'>
      <h3>export to PDF</h3>
      <p>Please adjust the below inputs to generate a sample PDF file:</p>
      <div class='container'>
        <div class='form-group'>
          <label>Number of columns in PDF file</label>
          <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInPdf'>
        </div>
        <div class='form-group'>
          <label>Number of records in PDF</label>
          <input type='text' class='form-control form-control-lg' value=300 id='numberOfRecordsInPdf'>
        </div>
        <input type='button' class='btn btn-info' value='Generate PDF' id='object2pdfBtnId'>
      </div>
    </div>
    <div class='col-sm-3'>
      <h3>export to DOC</h3>
      <p>Please adjust the below inputs to generate a sample DOC file:</p>
      <div class='container'>
        <div class='form-group'>
          <label>Number of columns in DOC file</label>
          <input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInDoc'>
        </div>
        <div class='form-group'>
          <label>Number of records in DOC</label>
          <input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInDoc'>
        </div>
        <input type='button' class='btn btn-info' value='Generate DOC' id='object2docBtnId'>
      </div>
    </div>
  </div>
</div>
276</head>
277
278</html>
\No newline at end of file

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/bootstrap.min.css'>`
10	`<a href='https://github.com/gharibi/JsObjExporter'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png'`
11	`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/bootstrap.min.js'></script>`
16	`<script>`
17	`function object2xls() {`
18
19	`// Retrieve the user inputs`
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	`// Construct the dataset for xls`
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	`// Construct the headers for the xls`
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	`// Generate the xls`
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	`// Retrieve the user inputs`
62	`var numberOfColumnsInCsv = document.getElementById('numberOfColumnsInCsv').value;`
63	`var numberOfRecordsInCsv = document.getElementById('numberOfRecordsInCsv').value;`
64
65	`// Construct the dataset for CSV`
66	`var data = [];`
67	`for (var i = 0; i < numberOfRecordsInCsv; i++) {`
68	`var rowData = {};`
69	`for (var j = 0; j < numberOfColumnsInCsv; j++) {`
70	`rowData['header_' + j] = createRandomString();`
71	`}`
72	`data.push(rowData);`
73	`}`
74
75	`// Construct the headers for the CSV`
76	`var headers = [];`
77	`for (var k = 0; k < numberOfColumnsInCsv; k++) {`
78	`headers.push({`
79	`alias: 'header ' + k,`
80	`name: 'header_' + k`
81	`});`
82	`}`
83
84	`// Construct the headers for the CSV`
85	`objectExporter({`
86	`type: 'csv',`
87	`exportable: data,`
88	`headers: headers`
89	`})`
90	`}`
91
92	`function object2pdf() {`
93
94	`// Retrieve the user inputs`
95	`var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInPdf').value;`
96	`var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInPdf').value;`
97
98	`// Construct the dataset for Pdf`
99	`var data = [];`
100	`for (var i = 0; i <= numberOfRecordsInPdf; i++) {`
101	`var rowData = {};`
102	`for (var j = 0; j < numberOfColumnsInPdf; j++) {`
103	`rowData['header_' + j] = createRandomString();`
104	`}`
105	`data.push(rowData);`
106	`}`
107
108	`// Construct the headers for the Pdf`
109	`var headers = [];`
110	`for (var k = 0; k < numberOfColumnsInPdf; k++) {`
111	`headers.push({`
112	`alias: 'header ' + k,`
113	`name: 'header_' + k,`
114	`flex: 1`
115	`});`
116	`}`
117
118	`// Generate the Pdf`
119	`objectExporter({`
120	`type: 'pdf',`
121	`exportable: data,`
122	`headers: headers,`
123	`fileName: 'sample_excel',`
124	`headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',`
125	`cellStyle: 'border: 1px solid lightgray; margin-bottom: -1px;'`
126	`})`
127	`}`
128
129	`function object2doc() {`
130
131	`// Retrieve the user inputs`
132	`var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInDoc').value;`
133	`var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInDoc').value;`
134
135	`// Construct the dataset for Doc`
136	`var data = [];`
137	`for (var i = 0; i <= numberOfRecordsInPdf; i++) {`
138	`var rowData = {};`
139	`for (var j = 0; j < numberOfColumnsInPdf; j++) {`
140	`rowData['header_' + j] = createRandomString();`
141	`}`
142	`data.push(rowData);`
143	`}`
144
145	`// Construct the headers for the Doc`
146	`var headers = [];`
147	`for (var k = 0; k < numberOfColumnsInPdf; k++) {`
148	`headers.push({`
149	`alias: 'header ' + k,`
150	`name: 'header_' + k,`
151	`flex: 1`
152	`});`
153	`}`
154
155	`// Generate the Pdf`
156	`objectExporter({`
157	`type: 'doc',`
158	`exportable: data,`
159	`headers: headers,`
160	`fileName: 'sample_doc',`
161	`headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',`
162	`cellStyle: 'padding: 5px; border: 1px solid #dddddd;'`
163	`})`
164	`}`
165
166	`function createRandomString() {`
167	`var text = '';`
168	`var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';`
169	`for (var i = 0; i < 5; i++)`
170	`text += possible.charAt(Math.floor(Math.random() * possible.length));`
171	`return text;`
172	`}`
173
174	`// Add the eventListeners for the buttons`
175	`window.onload = function () {`
176	`document.getElementById('object2xlsBtnId').onclick = function click() {`
177	`object2xls();`
178	`}`
179	`document.getElementById('object2csvBtnId').onclick = function click() {`
180	`object2csv();`
181	`}`
182	`document.getElementById('object2pdfBtnId').onclick = function click() {`
183	`object2pdf();`
184	`}`
185	`document.getElementById('object2docBtnId').onclick = function click() {`
186	`object2doc();`
187	`}`
188	`}`
189	`</script>`
190	`<div class='container'>`
191	`<div class="jumbotron">`
192	`<h2>Object-Exporter Example Page</h2>`
193	`<p>Below 4 examples illustrate how this plugin generates XLS, CSV, PDF and DOC only from`
194	`the frontend and without any communication to the backend!`
195	`</p>`
196	`</div>`
197	`<div class='row'>`
198	`<div class='col-sm-3'>`
199	`<h3>export to XLS</h3>`
200	`<p>Please adjust the below inputs to generate a sample object and export it to XLS format:</p>`
201	`<div class='container'>`
202	`<div class='form-group'>`
203	`<label>Number of columns in xls sheet</label>`
204	`<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInXls'>`
205	`</div>`
206	`<div class='form-group'>`
207	`<label>Number of records in xls sheet</label>`
208	`<input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInXls'>`
209	`</div>`
210	`<div class='form-group'>`
211	`<label>Worksheet Name</label>`
212	`<input type='text' class='form-control form-control-lg' value='Sample Worksheet' id='sheetNameInXls'>`
213	`</div>`
214	`<div class='form-group'>`
215	`<label>Contents style</label>`
216	`<input type='text' class='form-control form-control-lg' value='color:#8866ff;' id='contentsStyleInXls'>`
217	`</div>`
218	`<div class='form-group'>`
219	`<label>Content Title</label>`
220	`<input type='text' class='form-control form-control-lg' value='Sample dataset;' id='documentTitleInXls'>`
221	`</div>`
222	`<div class='form-group'>`
223	`<label>Content Style</label>`
224	`<input type='text' class='form-control form-control-lg' value='color:#000; font-size: 14;' id='documentTitleStyleInXls'>`
225	`</div>`
226	`<input type='button' class='btn btn-info' value='Generate XLS' id='object2xlsBtnId'>`
227	`</div>`
228	`</div>`
229	`<div class='col-sm-3'>`
230	`<h3>export to CSV</h3>`
231	`<p>Please adjust the below inputs to generate a sample object and export it to CSV format:</p>`
232	`<div class='container'>`
233	`<div class='form-group'>`
234	`<label>Number of columns in CSV file</label>`
235	`<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInCsv'>`
236	`</div>`
237	`<div class='form-group'>`
238	`<label>Number of records in CSV</label>`
239	`<input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInCsv'>`
240	`</div>`
241	`<input type='button' class='btn btn-info' value='Generate CSV' id='object2csvBtnId'>`
242	`</div>`
243	`</div>`
244	`<div class='col-sm-3'>`
245	`<h3>export to PDF</h3>`
246	`<p>Please adjust the below inputs to generate a sample PDF file:</p>`
247	`<div class='container'>`
248	`<div class='form-group'>`
249	`<label>Number of columns in PDF file</label>`
250	`<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInPdf'>`
251	`</div>`
252	`<div class='form-group'>`
253	`<label>Number of records in PDF</label>`
254	`<input type='text' class='form-control form-control-lg' value=300 id='numberOfRecordsInPdf'>`
255	`</div>`
256	`<input type='button' class='btn btn-info' value='Generate PDF' id='object2pdfBtnId'>`
257	`</div>`
258	`</div>`
259	`<div class='col-sm-3'>`
260	`<h3>export to DOC</h3>`
261	`<p>Please adjust the below inputs to generate a sample DOC file:</p>`
262	`<div class='container'>`
263	`<div class='form-group'>`
264	`<label>Number of columns in DOC file</label>`
265	`<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInDoc'>`
266	`</div>`
267	`<div class='form-group'>`
268	`<label>Number of records in DOC</label>`
269	`<input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInDoc'>`
270	`</div>`
271	`<input type='button' class='btn btn-info' value='Generate DOC' id='object2docBtnId'>`
272	`</div>`
273	`</div>`
274	`</div>`
275	`</div>`
276	`</head>`
277
278	`</html>`
\	No newline at end of file