title: Exporting report with header/footer information on front-end using JSON data
body: <p>What are some alternatives to create a report with additional header/footer information at the top and bottom of the page without entirely revamping the table library for display? I'm currently using Jquery/Bootgrid to load the data into tables</p>
  <p>The following function is a working implementation for exporting the list of search results. A CSV file would be available for download.But due to limitations with the &quot;msSaveOrOpenBlob&quot; / CSV format, I cannot include the header/footer information. To clarify, the report does not need to be in CSV format, common formats which can be displayed in a table form will do.</p>
  <pre><code>function getVisCol(visibleCol){
              $(&quot;#searchresult th&quot;).each(function(){
                  visibleCol.push($(this).data('columnId'));              
              }); 
          }
  
      $(&quot;.exportBtn&quot;).on('click', function(){
          //exportExcel();
          
          form = {
              'userId'     : $(&quot;#inputid&quot;).val(),
              'name'       : $(&quot;#inputname&quot;).val(),           
              'age'        : $(&quot;#inputage&quot;).val(),    
              'country'    : $(&quot;#inputcountry&quot;).val() 
          }
          
          $.ajax({
              type : 'POST',
              contentType : &quot;application/json&quot;,
              url : retrieveUserForExport,
              data: JSON.stringify(form),
              beforeSend: function(xhr) {
                  xhr.setRequestHeader(csrfHeader, csrfToken);
              },
              success:function(jd, textStatus, jqXHR) {   
                  myQuery = JSON.stringify(jd);
                  var visCol = [];
                  getVisCol(visCol);
                  JSONToCSVConvertor(myQuery, &quot;ExportFile&quot;, true, visCol);
              }
          });
      });
      
      
      function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, ignoreColumns) {
          //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
          var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
          
          var CSV = '' + '\r\n\n';    
          //Set Report title in first row or line         
          //CSV += ReportTitle ;
      
          //This condition will generate the Label/Header
          if (ShowLabel) {
              var row = &quot;&quot;;
              
              //This loop will extract the label from 1st index of on array
              for (var index in arrData[0]) {
                  if(ignoreColumns.indexOf(index) &gt; -1)
                      //Now convert each value to string and comma-seprated
                      row += index + ',';
              }       
              row = row.slice(0, -1);
              
              //append Label row with line break
              CSV += row + '\r\n';
              console.log(&quot;CSV value: &quot; + CSV);
          }
          
          //1st loop is to extract each row
          for (var i = 0; i &lt; arrData.length; i++) {
              var row = &quot;&quot;;
              
              //2nd loop will extract each column and convert it in string comma-seprated
              for (var index in arrData[i]) {
                  if(ignoreColumns.indexOf(index) &gt; -1)
                      row += '&quot;' + arrData[i][index] + '&quot;,';
              }       
              row.slice(0, row.length - 1);               
              //add a line break after each row
              CSV += row + '\r\n';
              console.log(&quot;CSV2 value: &quot; + CSV);
          }
      
          if (CSV == '') {        
              alert(&quot;Invalid data&quot;);
              return;
          }   
          
          //Generate a file name
          var fileName = &quot;Report_&quot;;
          //this will remove the blank-spaces from the title and replace it with an underscore
          fileName += ReportTitle.replace(/ /g,&quot;_&quot;);   
          
          //Initialize file format you want csv or xls
          var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
          
          // Now the little tricky part.
          // you can use either&gt;&gt; window.open(uri);
          // but this will not work in some browsers
          // or you will not get the correct file extension    
          
          if(window.navigator.msSaveOrOpenBlob) {
              var textFileAsBlob = new Blob([CSV], {
                  type: 'text/plain'
              });
              //window.navigator.msSaveOrOpenBlob(textFileAsBlob, fileName + &quot;.csv&quot;);
          } else {
          
              //this trick will generate a temp &lt;a /&gt; tag
              var link = document.createElement(&quot;a&quot;);    
              link.href = uri;
              
              //set the visibility hidden so it will not effect on your web-layout
              link.style = &quot;visibility:hidden&quot;;
              link.download = fileName + &quot;.csv&quot;;
              
              //this part will append the anchor tag and remove it after automatic click
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
          }
      }   
  </code></pre>