Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

PreviewRenderFormat Function

Gets or sets the page render format in the Document Viewer’s report preview.

#Declaration

TypeScript
export const PreviewRenderFormat: DevExpress.Analytics.Internal.IGlobalSubscribableValue<PageRenderFormat>

#Parameters

Name Type Description
newVal PageRenderFormat

A report page render format.

#Returns

Type Description
PageRenderFormat

A report page render format.

#Remarks

The Web Document Viewer allows you to specify the image format used to render report pages for preview: SVG or PNG.

The following options are available:

Png (default)

Report pages are rendered in PNG.

PNG is optimal for report preview in lower resolution where a large zoom factor is not required.

Svg

Report pages are rendered in SVG.

The use of the SVG format requires less memory for high-DPI and enables smooth zoom operations with no requests to the server. SVG also allows text selection.

Auto

In single-page mode, report pages are rendered in SVG. In multi-page mode, pages are rendered in SVG if the zoom factor is larger than 100% (zoom is larger than 1); otherwise, pages are rendered in PNG.

Leverages advantages of both SVG and PNG formats.

The following code snippet switches the mode to Auto in an ASP.NET Core application:

cshtml
<script>
  function onBeforeRender(s, e) {
      DevExpress.Reporting.Viewer.Settings.PreviewRenderFormat(DevExpress.Reporting.Viewer.Settings.PageRenderFormat.Auto);
  }
</script>
@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("100%")
        .ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
        .Bind(Model);
    @viewerRender.RenderHtml()
}

The following code snippet changes the PreviewRenderFormat value to Auto in an Angular application:

<dx-report-viewer [reportUrl]="reportUrl" height="calc(100vh - 90px)" developmentMode="true">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    <dxrv-callbacks (BeforeRender)="BeforeRender($event)"></dxrv-callbacks>
</dx-report-viewer>