在Asp.Net中使用报表查看器控件无法使用Cross browser lc报表打印来打印图像和背景色 [英] Image and back color is not printing with Cross browser rdlc report printing with report viewer control in Asp.Net
问题描述
要在asp.net mvc Web应用程序的报表查看器控件中为rdlc报表实现打印功能,我遵循了此解决方案.它为我 https://stackoverflow.com/a/14052577/870561 工作.
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.
此jquery脚本在报表查看器工具栏中添加了一个打印按钮,并在单击时显示了一个很酷的打印预览对话框.但这是不添加图像和印刷品背景颜色的样式.
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.
请提出一种包括rdlc报告中使用的图像以及背景色的方法.我的代码附在下面.
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&Version=11.0.0.0&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. CSS对于背景色,请添加css -webkit-print-color-adjust: exact
. 了解更多信息
2.要打印图像,您需要将此css属性添加到包含图像的img标签或div中. display:block;
或visibility:visible
3. Chrome浏览器无法快速加载图像,因此您必须在打印之前添加暂停.这个技巧对我有用.
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));
}
这篇关于在Asp.Net中使用报表查看器控件无法使用Cross browser lc报表打印来打印图像和背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!