How to load image and background color in print preview of chrome or firefox browser in Syncfusion JavaScript reportviewer?
Syncfusion Javascript ReportViewer allows you to prevent an external style sheet loading and image not displayed in print preview of Chrome or Firefox browser. The following sections guide you to view the background color and image in print preview with the help of ‘reportPrint’ API.
To load background color in print preview
Background color of a report element is not updated in print layout due to external style overwrites the print layout style specified in the application. To avoid this, set the ‘isStyleLoad’ property value to false in the ReportViewer control render pages as shown in the following code snippet.
<script type="text/javascript">
$(function () {
$("#container").ejReportViewer(
{
reportServiceUrl: "/api/ReportApi",
processingMode:ej.ReportViewer.ProcessingMode.Remote,
reportPath: "~/Report/GroupingAgg.rdl",
reportPrint: "onReportPrint"
});
});
function onReportPrint(args) {
args.isStyleLoad = false;
}
</script>
To load image in print preview
Images are not displayed in print preview due to passing content or stream to browser before loading the image tag. This can be avoided by increasing the value of the ‘printDelay’ property value as in the following code snippet.
<script>
$(function () {
$("#container").ejReportViewer(
{
reportServiceUrl: "/api/ReportApi",
processingMode:ej.ReportViewer.ProcessingMode.Remote,
reportPath: "~/Report/GroupingAgg.rdl",
reportPrint: "onPrintReport"
});
});
function onPrintReport(args) {
var data = $("#reportsample").data('ejReportViewer');
if (data.browserInfo.name != "msie")
{
args.printWind.printDelay = 2000;
}
args.isStyleLoad = false;
}
</script>
Download reportviewer print preview sample here
