javascript - 使用 JSON 数据在前端导出带有页眉/页脚信息的报告

Question

有哪些替代方法可以在页面顶部和底部创建带有额外页眉/页脚信息的报表，而无需完全修改表库以进行显示？我目前正在使用 Jquery/Bootgrid 将数据加载到表中

以下函数是用于导出搜索结果列表的工作实现。CSV 文件可供下载。但由于“msSaveOrOpenBlob”/CSV 格式的限制，我无法包含页眉/页脚信息。澄清一下，报告不需要是 CSV 格式，可以以表格形式显示的常见格式就可以了。

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);
        }
    }   

标签： javascriptjqueryfrontendexportjquery-bootgrid