asp.net mvc web appのレポートビューアコントロールでrdlcレポートの印刷機能を実装するために、画像とバックカラーがAsp.Netのレポートビューアコントロールでクロスブラウザrdlcレポート印刷で印刷されない

Question

それは私のために働いたhttps://stackoverflow.com/a/14052577/870561。

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

Answer 1

次の点は、バックの色については 1. CSSはCSS -webkit-print-color-adjust: exactを追加効果を取っています。 for more info 2.画像を印刷する必要がある画像を含むimgタグまたはdivにこのCSSプロパティを追加します。 display:block;またはvisibility:visible 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)); 
    } 

を