Sathya Raj Sathya Raj - 5 months ago 24
Javascript Question

how to get print of html div using javascript or jquery in asp.net mvc4

I tried the following code in asp.net mvc4. I am not getting div content in print window. The same following code works well in Asp.net webforms. please help me to sort out this issue.

function PrintDivContent(divId) {
try {
var rptHeader = document.getElementById(divId).innerHTML;
var pp = window.open("", "", "height=400,width=800");
pp.document.write("<html><head><title></title><script type='text/javascript' src='~/Content/JavaScript1.js'/><style> .table{margin-left: auto;margin-right: auto;border-collapse: collapse;table-layout:fixed;margin-bottom: 40px;}.header{background-color: gray;font-weight: bold;color: #fff;}.table th, .table td{border: 1px solid black;padding: 5px;text-align:center}/*.table tbody tr:last-child{font-weight: 700;}*/.table tbody tr:nth-child(2){background-color: #6545E2;color: white;}h2 {text-align:center;}.td50 ,.td75,.td100{color:black;}</style></head><body>");
pp.document.write(rptHeader);
//var printContent = document.getElementById(divId);
//var WinPrint = window.open('', '', 'left=0,top=0,toolbar=0,sta­tus=0');

pp.document.write('</body></html>');
setTimeout(function () {
pp.print();
pp.close();
}, 500);

}
catch (err) {
alert(err.message);
}



//return false;
}

Answer

Try below javascript function which needs ID of the div that you want to print:

function printReport(divName) {

    var WindowObject = window.open('', 'PrintWindow', 'width=1000,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
    WindowObject.document.write
        (
            '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' +
            '<html><head><style type="text/css" > ' +
            '.gridViewReport {font-family: Segoe UI, Verdana, Arial, sans-serif; font-size: .9em; font-variant: normal; width : 100%; background-color : #fff;  margin : 5px 0 10px 0; border :thin solid #c1c1c1;  empty-cells:show; }  .gridViewReport th { border :thin solid #c1c1c1;  border-left:none; text-decoration: none;} .gridViewReport td{  border: solid 1px #c1c1c1; min-height: 25px;text-align: left;padding-left: 10px; border-left:none; border-bottom:none; } .gridViewReport .pgrReport { display:none;} .gridViewReport th a{ color: Black; text-decoration: none;}' +
            '.gridView {font-family: Segoe UI, Verdana, Arial, sans-serif; font-size: .9em; font-variant: normal; width : 100%; background-color : #fff;  margin : 5px 0 10px 0; border :thin solid #c1c1c1;  empty-cells:show; }  .gridView th { border :thin solid #c1c1c1;  border-left:none; text-decoration: none;} .gridView td{  border: solid 1px #c1c1c1; min-height: 25px;text-align: left;padding-left: 10px; border-left:none; border-bottom:none; } .gridView .pgr { display:none;} .gridView th a{ color: Black; text-decoration: none;} .gridView .grdChkBx{display:none;}' +
            '</style>' +
            '</head><body> <div  style="  font-family: Segoe UI, Verdana, Arial, sans-serif;font-variant: normal">' + $('#' + divName).html() +
            '</div></body></html>'
        );
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
}

You can remove unwanted CSS code.

Comments