How to load image and background color 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. 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
Find the below code examples for your reference.
If you are using JavaScript application then you can refer the below 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>
If you are using the MVC application then you can refer the below code snippet.
Index.chtml:
<script>
function onPrintReport(args) {
var data = $("#reportviewer").data('ejReportViewer');
if (data._browserInfo.name != "msie") {
args.printWind.printDelay = 2000;
}
args.isStyleLoad = false;
}
</script>
<div id = "ControlRegion">
<div>
@(Html.EJ().ReportViewer("reportviewer")
.ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Local)
.ReportPath("~/App_Data/GroupingAggregate.rdlc").ReportServiceUrl("/api/ReportAPI")
.DataSources(t => t.Name("Sales").Value(ViewData["Sales"]).Add())
.ReportPrint("onPrintReport"))
</div>
If you are using ASP.NET Core application then you can please refer the below code snippet.
Index.chtml:
<div style="height:100%">
<ej-report-viewer id="reportviewer1" report-service-url="../Home" report-print="onPrintReport" />
</div>
<ej-script-manager></ej-script-manager>
<script>
function onPrintReport(args) {
var data = $("#reportviewer1").data('ejReportViewer');
if (data._browserInfo.name != "msie") {
args.printWind.printDelay = 2000;
}
args.isStyleLoad = false;
}
</script>
If you are using angular application then you can refer the below code snippet.
App.component.html
<ej-reportviewer id="viewer" [reportServiceUrl] = "serviceUrl" [exportSettings]="exportSettings" (reportPrint) = "onPrintReport($event)" style="width: 100%;height: 600px"> </ej-reportviewer>
App.component.ts
export class AppComponent {
title = 'reportviewerapp';
public serviceUrl: string;
public exportSettings: any;
constructor() {
this.serviceUrl = 'http://localhost:53357/api/ReportApi';
this.exportSettings = {
exportOptions: ej.ReportViewer.ExportOptions.All & ~(ej.ReportViewer.ExportOptions as any).Html& ~(ej.ReportViewer.ExportOptionsas any).PPT & ~(ej.ReportViewer.ExportOptions as any).CSV
};
}
onPrintReport(args) {
var data = $("#viewer").data('ejReportViewer');
if (data._browserInfo.name != "msie") {
args.printWind.printDelay = 2000;
}
args.isStyleLoad = false;
}
}
