C# 使用Asp.Net中的报表查看器控件进行跨浏览器rdlc报表打印时未打印图像和背景色

为了在asp.net mvc web app的报表查看器控件中实现rdlc报表的打印功能，我采用了以下解决方案。这对我有用

这个jquery脚本在报表查看器工具栏中添加了一个打印按钮，单击会显示一个很酷的打印预览对话框。但它没有在打印中添加图像和背景色样式。

请建议一种包含rdlc报告中使用的图像以及背景颜色的方法。我的代码附在下面

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

函数pageLoad（）{
试一试{
如果（！$（“#ff_打印”）.长度）{
var ControlName='ReportViewer1'；
var innerTbody=''；
变量innerTable=''+innerTbody+''
变量outerDiv=''+内部表+''；
$（“#ReportViewer1_ctl05>div”）.append（outerDiv）；
}
}
捕获（e）{警报（e）；}
}
函数PrintFunc（）{
var strFrameName=（“打印机-”+（新日期（））.getTime（））；
var jFrame=$（“”）；
jFrame
.css（“宽度”、“1px”）
.css（“高度”、“1px”）
.css（“位置”、“绝对”）
.css（“左”，“2000px”）
。附录（$（“正文：第一”）；
var objFrame=window.frames[strFrameName]；
var objDoc=objFrame.document；
var jStyleDiv=$（“”）。追加（$（（“样式”）.clone（）；
objDoc.open（）；
write（$（“head”）.html（））；
objDoc.write（$（“#VisibleReportContentReportViewer1_ctl09”）.html（）；
objDoc.write（“@page{size:auto；margin:5mm}”）
objDoc.close（）；
objFrame.print（）；
setTimeout（函数（）{jFrame.remove（）；}，（60*1000））；
}

以下几点正在生效 1.背景色CSS添加CSS

-webkit打印颜色调整：精确

。 2.要打印图像，您需要将此css属性添加到包含图像的img标记或div中<代码>显示：块或

可见性：可见
3.Chrome无法快速加载图像，因此您必须在打印前添加暂停。这个黑客帮了我的忙

我得到的最终解决方案是：

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

函数PrintFunc（）{
var strFrameName=（“打印机-”+（新日期（））.getTime（））；
var jFrame=$（“”）；
jFrame
.css（“宽度”、“1px”）
.css（“高度”、“1px”）
.css（“位置”、“绝对”）
.css（“左”，“2000px”）
。附录（$（“正文：第一”）；
var objFrame=window.frames[strFrameName]；
var objDoc=objFrame.document；
var jStyleDiv=$（“”）。追加（$（（“样式”）.clone（）；
objDoc.open（）；
write（$（“head”）.html（））；
objDoc.write（$（“#VisibleReportContentReportViewer1_ctl09”）.html（）；
var style=“”；
style=style+“@page{size:auto；边距：0.845in1in0.845in1in}”；
style=style+“@media print{body{-webkit print color adjust:exact；}img{visibility:visible；}}}”；
样式=样式+“”；
objDoc.write（风格）；
setTimeout（函数（）{
objDoc.close（）；
objFrame.print（）；
}, 750);
setTimeout（函数（）{jFrame.remove（）；}，（60*1000））；
}