title: How to open html table in xls on click of a button
body: <p>I am trying to open html table in xls on click of a button. I already have a way (using javascript) to export the html table in xls through "save as". Here I have to save the resulting xls file and then I can open it. Now I want to improve it so on click of button from html page, the html table should be opened in xls without need for "save as".</p>
  
  <p>This is the javascript I am trying to use:</p>
  
  <pre><code>function fnExcelReport() {
      var tab_text = '&lt;html xmlns:x="urn:schemas-microsoft-com:office:excel"&gt;';
      tab_text = tab_text + '&lt;head&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;x:ExcelWorksheet&gt;';
      tab_text = tab_text + '&lt;x:Name&gt;Test Sheet&lt;/x:Name&gt;';
      tab_text = tab_text + '&lt;x:WorksheetOptions&gt;&lt;x:Panes&gt;&lt;/x:Panes&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;';
      tab_text = tab_text + '&lt;/x:ExcelWorksheets&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;/head&gt;&lt;body&gt;';
      tab_text = tab_text + "&lt;table&gt;";
      var headingTable = $("#tableData").clone();//In my html table id="tableData"
      tab_text = tab_text + headingTable.html();
      tab_text = tab_text + '&lt;/table&gt;';
      $('.c_tbl').each(function( index ) {
          tab_text = tab_text + "&lt;table&gt;";
          tab_text = tab_text + "&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;";
          tab_text = tab_text + '&lt;/table&gt;';
          tab_text = tab_text + "&lt;table&gt;";
          var exportTable = $(this).clone();
          tab_text = tab_text + exportTable.html();
          tab_text = tab_text + '&lt;/table&gt;';
      });
      tab_text = tab_text + '&lt;/body&gt;&lt;/html&gt;';
      var fileName = name + '.xls';
      var blob = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" })
      window.saveAs(blob, wo_var + ".xls");
  }
  </code></pre>
  
  <p>From html I am trying to call this function fnExcelReport() using:</p>
  
  <pre><code>&lt;button id="btnExport" onclick="fnExcelReport();"&gt;Open as Excel&lt;/button&gt;
  </code></pre>
  
  <p>But I keep getting following error:</p>
  
  <pre><code>openInExcel.js:8 Uncaught ReferenceError: $ is not defined
      at fnExcelReport (openInExcel.js:8)
      at HTMLButtonElement.onclick (Test.html:103)
  </code></pre>
  
  <p>Google search for this error shows you cannot put the script reference to jquery-ui before the jquery script itself. But I am not using JQuery. Other things I tried still give the same error "Uncaught ReferenceError: $ is not defined" just at different line number due to changes.</p>
  
  <ol>
  <li><p>I tried adding:</p>
  
  <p>$(document).ready(function(){
  });</p>
  
  <p>And add call to function fnExcelReport() inside document ready. </p></li>
  <li><p>Also tried including whole function fnExcelReport() inside document ready and then adding <code>$("#btnExport").click(fnExcelReport);</code> before closing document ready. For this removed <code>onclick="fnExcelReport();"</code> from button element.</p></li>
  </ol>
  
  <p>Both above methods still give same error "Uncaught ReferenceError: $ is not defined".</p>
  
  <p>Can someone help me find what I am doing wrong or suggest any alternate way to get this done? </p>