How to show print same with Html5Viewer?

1 Answer 58 Views
Report Viewer - ASP.NET Report Viewer - HTML5
Doyeong
Top achievements
Rank 1
Doyeong asked on 01 Aug 2022, 08:48 AM

[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

Sort by
0
Todor
Telerik team
answered on 04 Aug 2022, 07:35 AM

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

Brand new Telerik Reporting course in Virtual Classroom - the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products. Check it out at https://learn.telerik.com/.
Tags
Report Viewer - ASP.NET Report Viewer - HTML5
Asked by
Doyeong
Top achievements
Rank 1
Answers by
Todor
Telerik team
Share this question
or