asp.net mvc 웹 응용 프로그램의 보고서 뷰어 컨트롤에서 rdlc 보고서의 인쇄 기능을 구현하기 위해 Asp.Net

Question

의 보고서 뷰어 컨트롤로 크로스 브라우저 rdlc 보고서 인쇄로 이미지 및 뒷면 색이 인쇄되지 않는 경우이 솔루션을 따랐습니다. 그것은 나를 위해 일했다 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)); 
    } 

을