deferredExample.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML table Export</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  7. <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  8. <script type="text/javascript" src="../tableExport.js"></script>
  9. <script type="text/css">
  10. .exportProgress {
  11. display: inline;
  12. margin-left: 2ex;
  13. }
  14. </script>
  15. <script type="text/javascript">
  16. 'use strict';
  17. $(document).ready(function() {
  18. var maxRows = 555;
  19. var macCols = 26;
  20. var minRand = 100;
  21. var maxRand = 10000;
  22. var T = [];
  23. var r = 0;
  24. var c = 1;
  25. T.push('<table id="grid"><thead><tr><th>col #</th>');
  26. while (++c <= macCols+1)
  27. T.push('<td>col ' + c + '</td>');
  28. T.push('</tr></thead><tbody>');
  29. while (r++ < maxRows) {
  30. c = 0;
  31. T.push('<tr><td>' + r + '</td>');
  32. while (c++ < macCols)
  33. T.push('<td>' + (Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand) + '</td>');
  34. T.push('</tr>');
  35. }
  36. T.push('</tbody></table>');
  37. document.getElementById ('content').innerHTML = T.join ("");
  38. // Handle export button click
  39. $('#exportButton').click(function(e) {
  40. e.preventDefault();
  41. // Show progress
  42. $('#exportButton').prop('disabled, true')
  43. $('.exportProgress').show();
  44. setTimeout(function() {
  45. $.when(doExport()).done(function(){
  46. // Hide progress
  47. $('.exportProgress').hide();
  48. $('#exportButton').prop('disabled, false')
  49. });
  50. },100);
  51. });
  52. });
  53. function doExport() {
  54. var deferred = $.Deferred();
  55. // Export table
  56. $('#grid').tableExport({
  57. type:'excel',
  58. onBeforeSaveToFile: function(){
  59. deferred.resolve(); }
  60. });
  61. return deferred.promise();
  62. }
  63. </script>
  64. </head>
  65. <body>
  66. <div style="display: inline">
  67. <button id="exportButton">Export to Excel</button>
  68. <span class="exportProgress" style="display: none"> Please wait, exporting </span>
  69. </div>
  70. <div id="content">
  71. </div>
  72. </body>
  73. </html>