如何在asp.net mvc 4中使用javascript或jquery打印html div答案

【问题标题】：how to get print of html div using javascript or jquery in asp.net mvc4如何在asp.net mvc 4中使用javascript或jquery打印html div
【发布时间】：2016-06-23 11:43:51
【问题描述】：

我在 asp.net mvc4 中尝试了以下代码。我没有在打印窗口中获取 div 内容。以下相同的代码在 Asp.net webforms 中运行良好。请帮我解决这个问题。

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,status=0');

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

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



            //return false;
        }

【问题讨论】：

以上代码在asp.net web表单中有效，但在mvc4中无效

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

试试下面的javascript函数，它需要你要打印的div的ID：

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

您可以删除不需要的 CSS 代码。

【讨论】：