1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>HTML table Export</title>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
- <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
- <script type="text/javascript" src="../tableExport.js"></script>
- <script type="text/css">
- .exportProgress {
- display: inline;
- margin-left: 2ex;
- }
- </script>
- <script type="text/javascript">
- 'use strict';
- $(document).ready(function() {
- var maxRows = 555;
- var macCols = 26;
- var minRand = 100;
- var maxRand = 10000;
- var T = [];
- var r = 0;
- var c = 1;
- T.push('<table id="grid"><thead><tr><th>col #</th>');
- while (++c <= macCols+1)
- T.push('<td>col ' + c + '</td>');
- T.push('</tr></thead><tbody>');
- while (r++ < maxRows) {
- c = 0;
- T.push('<tr><td>' + r + '</td>');
- while (c++ < macCols)
- T.push('<td>' + (Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand) + '</td>');
- T.push('</tr>');
- }
- T.push('</tbody></table>');
- document.getElementById ('content').innerHTML = T.join ("");
- // Handle export button click
- $('#exportButton').click(function(e) {
- e.preventDefault();
- // Show progress
- $('#exportButton').prop('disabled, true')
- $('.exportProgress').show();
- setTimeout(function() {
- $.when(doExport()).done(function(){
- // Hide progress
- $('.exportProgress').hide();
- $('#exportButton').prop('disabled, false')
- });
- },100);
- });
- });
- function doExport() {
- var deferred = $.Deferred();
- // Export table
- $('#grid').tableExport({
- type:'excel',
- onBeforeSaveToFile: function(){
- deferred.resolve(); }
- });
- return deferred.promise();
- }
- </script>
- </head>
- <body>
- <div style="display: inline">
- <button id="exportButton">Export to Excel</button>
- <span class="exportProgress" style="display: none"> Please wait, exporting </span>
- </div>
- <div id="content">
- </div>
- </body>
- </html>
|