Image and back color is not printing with Cross browser rdlc report printing with report viewer control in Asp.Net

问题

to implement print feature for rdlc report in report viewer control in asp.net mvc web app, I followed this solution. It worked for me https://stackoverflow.com/a/14052577/870561.

this jquery script adds a print button in report viewer toolbar and on click shows a print preview dialogue that is cool. But it is not adding images and back color styles in print.

Please suggest a way to include images which are used in rdlc reports and also back colors. My code is attached below.

function pageLoad() {
    try {
        if (!$("#ff_print").length) {
            var ControlName = 'ReportViewer1';
            var innerTbody = '<tbody><tr><td><input type="image" style="border-width: 0px; padding: 2px; height: 16px; width: 16px;" alt="Print" src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&amp;Version=11.0.0.0&amp;Name=Microsoft.Reporting.WebForms.Icons.Print.gif" title="Print"></td></tr></tbody>';
            var innerTable = '<table title="Print" onclick="PrintFunc(\'' + ControlName + '\'); return false;" id="ff_print" style="border: 1px solid rgb(236, 233, 216); background-color: rgb(236, 233, 216); cursor: default;">' + innerTbody + '</table>'
            var outerDiv = '<div style="display: inline; font-size: 8pt; height: 30px;" class=" "><table cellspacing="0" cellpadding="0" style="display: inline;"><tbody><tr><td height="28px">' + innerTable + '</td></tr></tbody></table></div>';

            $("#ReportViewer1_ctl05 > div").append(outerDiv);
        }
    }
    catch (e) { alert(e); }

}

function PrintFunc() {
    var strFrameName = ("printer-" + (new Date()).getTime());
    var jFrame = $("<iframe name='" + strFrameName + "'>");
    jFrame
    .css("width", "1px")
    .css("height", "1px")
    .css("position", "absolute")
    .css("left", "-2000px")
    .appendTo($("body:first"));

    var objFrame = window.frames[strFrameName];
    var objDoc = objFrame.document;
    var jStyleDiv = $("<div>").append($("style").clone());

    objDoc.open();
    objDoc.write($("head").html());
    objDoc.write($("#VisibleReportContentReportViewer1_ctl09").html());
    objDoc.write("<style>@page { size: auto; margin:5mm } </style>")
    objDoc.close();
    objFrame.print();

    setTimeout(function () { jFrame.remove(); }, (60 * 1000));
}

回答1:

The following points are taking effect 1. CSS For back colors add css -webkit-print-color-adjust: exact. for more info 2. to print Images you need add this css property to img tag or div which contains the image. display:block; or visibility:visible 3. Chrome does not load images quickly, so you have to add pause before print. This hack worked for me.

The final solution I got this:

  function PrintFunc() {
        var strFrameName = ("printer-" + (new Date()).getTime());
        var jFrame = $("<iframe name='" + strFrameName + "'>");
        jFrame
        .css("width", "1px")
        .css("height", "1px")
        .css("position", "absolute")
        .css("left", "-2000px")
        .appendTo($("body:first"));

        var objFrame = window.frames[strFrameName];
        var objDoc = objFrame.document;
        var jStyleDiv = $("<div>").append($("style").clone());

        objDoc.open();
        objDoc.write($("head").html());
        objDoc.write($("#VisibleReportContentReportViewer1_ctl09").html());
        var style = "<style>";
        style = style + "@page { size: auto; margin: 0.845in 1in 0.845in 1in }";
        style = style + "@media print { body {-webkit-print-color-adjust: exact; } img{ visibility : visible; } }";
        style = style + "</style>";
        objDoc.write(style);

        setTimeout(function () {
            objDoc.close();
            objFrame.print();
        }, 750);

        setTimeout(function () { jFrame.remove(); }, (60 * 1000));
    }

来源：https://stackoverflow.com/questions/43949701/image-and-back-color-is-not-printing-with-cross-browser-rdlc-report-printing-wit

标签

jquery

asp.net-mvc

rdlc

reportviewer