[Html5Viewer]
[PrintButton in Html5Viewer]
[Print Preview - when clicked the print button]
[Report.cshtml]
@{
ViewData["Title"] = "Label";
}
<style>
#reportViewerLayout {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#reportViewerLayout")
.telerik_ReportViewer({
// The URL of the service which will serve reports.
// The URL corresponds to the name of the controller class (ReportsController).
// For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
serviceUrl: "/api/reports",
// The URL for custom report viewer template. The template can be edited -
// new functionalities can be added and unneeded ones can be removed.
// For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
// templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-16.1.22.511.html',
//ReportSource - report description
reportSource: {
// The report can be set to a report file name (trdx report definition)
// or CLR type name (report class definition).
report: '@Html.Raw(ViewBag.PopReportFile)',
parameters: {
...params...
}
},
// Specifies whether the viewer is in interactive or print preview mode.
// PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
// INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled.
viewMode: telerikReportViewer.ViewModes.PRINT_PREVIEW,
// Sets the scale mode of the viewer.
// Three modes exist currently:
// FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
// FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.
// SPECIFIC - Uses the scale to zoom in and out the report.
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
// Zoom in and out the report using the scale
// 1.0 is equal to 100%, i.e. the original size of the report
scale: 1.0,
enableAccessibility: false,
//If set to true shows the Send Mail Message toolbar button
sendEmail: { enabled: false },
});
});
</script>
------------------------------------------------------------------------------------------------------------------------------------------------------
Hi, I have a question.
I want to show like PrintPreview screen, not like Html5Viewer screen.
The location, size, and font of each character are provided through the Report Parameter and are linked by DataBinding.
And, the words or number(like '400'), all of the same components are imageview, and the expression dialog states:
All of the same components are imageview, and the expression dialog states:
<svg>
<g>
<text font-size="25">
<tspan x="0%" y="20%" textLength="60%">TEST</tspan>
</text>
</g>
</svg>I change the viewMode to [viewMode: telerikReportViewer.ViewModes.PRINT_PREVIEW], or
var rv = $("#reportViewerLayout").data("telerik_ReportViewer");
rv.commands.print.exec();
But nothing has changed in particularly.
How I can show the report screen like [Print Preview]?
1 Answer, 1 is accepted
Hi Doyeong,
I tested locally with the SVG you provide and can confirm that the SVG images' rendering is incorrect in HTML formats. Generally, we pass the SVG markup to the browser and expect it to render it.
I have logged this as a new bug in our public feedback portal and voted on your behalf - The SVG image in a Picturebox is not rendered correctly in HTML Viewer's Preview modes. As a token of gratitude, we have updated your Telerik points.
As a workaround, you may try to convert the image to another format - see the supported format in the PictureBox article.
Regards,
Todor
Progress Telerik