PreviewRenderFormat Function

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

Declaration

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:

<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:

report-viewer.html

<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>

report-viewer.ts

import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { PreviewRenderFormat, PageRenderFormat } from 'devexpress-reporting/dx-webdocumentviewer'

@Component({
  // ...
})
export class ReportViewerComponent {
  reportUrl: string = "TestReport";
  invokeAction: string = '/DXXRDV';
  BeforeRender(event) {
      PreviewRenderFormat(PageRenderFormat.Auto);
  }
  // ...
}