Exporting report with header/footer information on front-end using JSON data

Question

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

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 "msSaveOrOpenBlob" / 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.

function getVisCol(visibleCol){
            $("#searchresult th").each(function(){
                visibleCol.push($(this).data('columnId'));              
            }); 
        }

    $(".exportBtn").on('click', function(){
        //exportExcel();
        
        form = {
            'userId'     : $("#inputid").val(),
            'name'       : $("#inputname").val(),           
            'age'        : $("#inputage").val(),    
            'country'    : $("#inputcountry").val() 
        }
        
        $.ajax({
            type : 'POST',
            contentType : "application/json",
            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, "ExportFile", 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 = "";
            
            //This loop will extract the label from 1st index of on array
            for (var index in arrData[0]) {
                if(ignoreColumns.indexOf(index) > -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("CSV value: " + CSV);
        }
        
        //1st loop is to extract each row
        for (var i = 0; i < arrData.length; i++) {
            var row = "";
            
            //2nd loop will extract each column and convert it in string comma-seprated
            for (var index in arrData[i]) {
                if(ignoreColumns.indexOf(index) > -1)
                    row += '"' + arrData[i][index] + '",';
            }       
            row.slice(0, row.length - 1);               
            //add a line break after each row
            CSV += row + '\r\n';
            console.log("CSV2 value: " + CSV);
        }
    
        if (CSV == '') {        
            alert("Invalid data");
            return;
        }   
        
        //Generate a file name
        var fileName = "Report_";
        //this will remove the blank-spaces from the title and replace it with an underscore
        fileName += ReportTitle.replace(/ /g,"_");   
        
        //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>> 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 + ".csv");
        } else {
        
            //this trick will generate a temp <a /> tag
            var link = document.createElement("a");    
            link.href = uri;
            
            //set the visibility hidden so it will not effect on your web-layout
            link.style = "visibility:hidden";
            link.download = fileName + ".csv";
            
            //this part will append the anchor tag and remove it after automatic click
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }