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/css/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/js/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;
    var columnSeperatorInCsv = document.getElementById('columnSeperatorInCsv').value;
65
    // 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);
    }
75
    // Construct the headers for the CSV
    var headers = [];
    for (var k = 0; k < numberOfColumnsInCsv; k++) {
      headers.push({
        alias: 'header ' + k,
        name: 'header_' + k
      });
    }
84
    // Construct the headers for the CSV
    objectExporter({
      type: 'csv',
      exportable: data,
      headers: headers,
      columnSeparator: columnSeperatorInCsv
    })
  }
93
  function object2pdf() {
95
    // Retrieve the user inputs
    var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInPdf').value;
    var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInPdf').value;
99
    // 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);
    }
109
    // 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
      });
    }
119
    // 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;'
    })
  }
130
  function object2doc() {
132
    // Retrieve the user inputs
    var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInDoc').value;
    var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInDoc').value;
136
    // 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);
    }
146
    // 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
      });
    }
156
    // 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;'
    })
  }
167
  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;
  }
175
  // 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();
    }
    document.getElementById('html2pdfBtnId').onclick = function click() {
191
      // Generate the Pdf from the html section
      objectExporter({
        type: 'html',
        exportable: document.getElementById('domId').value
      })
    }
  }
</script>
<div class='container'>
  <div class="jumbotron">
    <h2>Object-Exporter Example Page</h2>
    <p>Below 5 examples illustrate how this plugin exports the randomly generated object to XLS, CSV, PDF, DOC and
      only from the frontend and without any communication to the backend!
    </p>
  </div>
  <div class='row' id="html2pdfId">
    <div class='col'>
      <h3>JsObj 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'>
      <h3>JsObj 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>
        <div class='form-group'>
          <label>Column Seperator in CSV</label>
          <input type='text' class='form-control form-control-lg' value=',' id='columnSeperatorInCsv'>
        </div>
        <input type='button' class='btn btn-info' value='Generate CSV' id='object2csvBtnId'>
      </div>
    </div>
    <div class='col'>
      <h3>JsObj 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'>
      <h3>JsObj 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 class='col' id="test">
      <h3>HTML to PDF</h3>
      <p>Please adjust the below input to generate a sample PDF file:</p>
      <div class='container'>
        <div class='form-group'>
          <label>DOM Id:</label>
          <input type='text' class='form-control form-control-lg' value='html2pdfId' id='domId'>
        </div>
        <input type='button' class='btn btn-info' value='Generate PDF' id='html2pdfBtnId'>
      </div>
    </div>
  </div>
</div>
302</head>
303
304</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/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	`// 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	`var columnSeperatorInCsv = document.getElementById('columnSeperatorInCsv').value;`
65
66	`// Construct the dataset for CSV`
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	`// Construct the headers for the CSV`
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	`// Construct the headers for the CSV`
86	`objectExporter({`
87	`type: 'csv',`
88	`exportable: data,`
89	`headers: headers,`
90	`columnSeparator: columnSeperatorInCsv`
91	`})`
92	`}`
93
94	`function object2pdf() {`
95
96	`// Retrieve the user inputs`
97	`var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInPdf').value;`
98	`var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInPdf').value;`
99
100	`// Construct the dataset for Pdf`
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	`// Construct the headers for the Pdf`
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	`// Generate the Pdf`
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	`// Retrieve the user inputs`
134	`var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInDoc').value;`
135	`var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInDoc').value;`
136
137	`// Construct the dataset for Doc`
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	`// Construct the headers for the Doc`
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	`// Generate the Pdf`
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	`// Add the eventListeners for the buttons`
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	`// Generate the Pdf from the html section`
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