# Web Viewers Discover how Web Viewers enables seamless report viewing in Blazor, ASP.NET Core, MVC, Angular, React, and HTML5/JS applications. Explore our comprehensive UI components. ## Content With Web Viewers, you can view reports in Blazor, ASP.NET Core, ASP.NET MVC, Angular, React, HTML5/JS applications. These viewers are lightweight with built-in support for client-side printing. Like Desktop Viewers, the Web Viewers are feature-rich that allow you to easily view, print, and export reports. The viewers are highly interactive, giving you the ability to enter parameters, perform sort and drill down, navigate to other reports using drill-through links, and so on. Multiple View Modes let you display your reports as Paginated, Continuous, or in Galley view. In addition, the viewers are customizable and localizable according to your personal needs. The viewer API lets you customize the viewers and blend them into your web page. You can add or hide features or buttons on viewers toolbar and sidebar, you can customize the parameters panel, and so on. For this, you must have hands-on experience in coding, see this set of articles for details. * [JS Viewer Application](/activereportsnet/docs/v20.1/developers/create-applications/js-viewer-application) * [Blazor Viewer Application](/activereportsnet/docs/v20.1/developers/create-applications/blazor-viewer-application) * [ASP.NET WebViewer Application](/activereportsnet/docs/v20.1/developers/create-applications/aspnet-webviewer-application) As Report Readers, let us focus on the UI of Web Viewers. ![Web Viewer UI](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/jsviewer.jpg) ## Viewer UI ### Viewer Sidebar | Sidebar Element | Name | Description | | --- | --- | --- | | ![Display Sidebar button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/displaysidebar.jpg) | Display Sidebar | Displays the sidebar that includes the Search, Export, and Parameters panes. | | ![Search button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/sidesearch.jpg) | Search | Displays the Search pane. | | ![Export button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/sideexport.jpg) | Export | Displays the Export pane where you can select an export format and options for the report you are previewing. | | ![Parameters button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/sideparameters.jpg) | Parameters | Displays the Parameters pane. If a report does not have parameters, the Parameters button is not displayed. | | ![Table of Contents button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/toc.jpg) | Table of Contents | Displays the Table of Contents pane. If a report does not have the Label property or Document map label set, the Table of Contents or Documents map pane does not appear. | ### Viewer Top Toolbar | Toolbar Element | Name | Description | | --- | --- | --- | | ![Go to First page button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/gotofirst.jpg) ![Go to Last page button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/lastpage.jpg) | Go to First/Last page | Jumps to the first or last page of a report. | | ![Go to Previous/Next page buttons](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/gotoprevious.jpg) ![Go to Next page button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/gotonext.jpg) | Go to Previous/Next page | Navigates through a report page by page. | | ![Current page button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/currentpage.jpg) | Current page | Displays the current page number and page total. Enter the page number to view a specific page. | | ![Refresh button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/refresh.jpg) | Refresh | Refreshes the report. | | ![History: Back to Parent button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/historybacktoparent.jpg) | History: Back to Parent | Returns to the parent report in a drill-down Page Report or RDLX report. | | ![History: Go Back button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/historygoback.jpg) | History: Go Back | Navigates to a previous page in a parent report in a drill-down Page Report or RDLX report. | | ![History: Go Forward button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/historygoforward.jpg) | History: Go Forward | Navigates to a next page in a parent report in a drill-down Page Report or RDLX report. | | ![Move button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/movetool.jpg) | Move Tool | A move tool that you can use to navigate the report. | | ![Zoom Out button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/zoomout.jpg) | Zoom Out | Decreases the magnification of your report. | | ![Zoom mode button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/100.jpg) | Zoom mode | Displays the current zoom percentage which can also be edited. Allows you to select from the available zoom options - **50%**, **100%**, **150%**, **200%,** 300%, **Fit to Page**, and **Fit to Width**. | | ![Zoom In button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/zoomin.jpg) | Zoom In | Increases the magnification of your report. | | ![Toggle Fullscreen button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/togglefullscreen.jpg) | Toggle Fullscreen | Switches to a Fullsreen mode. | | ![Print button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/print.jpg) | Print | Displays the Print screen to specify printing options. | | ![Single Page View button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/singlepageview.jpg) | Single Page View | Shows one page at a time in the viewer. | | ![Continious View button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/continiousview.jpg) | Continuous View | Shows all preview pages one below the other. | | ![Galley mode button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/galleymode.jpg) | Galley mode | Provides a viewer mode which removes automatic page breaks from an RDLX report and displays data in a single scrollable page. This mode maintains page breaks you create in the report. | ### Viewer Search The **Search** pane lets you enter a word or phrase for which to search within the report. Under **Use these additional criteria**, you may optionally select additional criteria. When you click **Search**, any results appear in the **Find results** list. Click an item in the list to jump to the item you selected and highlight it. ### Viewer Export To display the Export pane, click **Export** in the sidebar. The **Export** pane lets you enter parameters for exporting a report that you are previewing. The available format options for Page/RDLX reports are Excel 2003, Excel, Word 2003, Word, PDF, CSV, JSON, XML, Tagged Image, Web Archive, and Excel Data (hidden by default). The available format options for Section Reports are Rich Text Format, Excel 2003, Excel, PDF, Tagged Image, Plain Text, and Web Archive. ![Export pane](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/export.jpg) After you set all necessary export properties, click **Export**. ### Viewer Parameters Pane The Parameters pane appears when you click the **Parameters** button in the sidebar. In the **Parameters** pane, enter a value to filter the data to be displayed and click **Preview**. If a report does not have parameters, the Parameters pane is disabled. ![Parameters pane](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/jsviewer_parameters.jpg) JSViewer supports previewing a custom parameter panel, designed in [ActiveReports WebDesigner](/activereportsnet/docs/v20.1/report-authors/webdesigner/custom-parameters-view). ### Viewer Table of Contents Pane The Table of Contents pane appears when you click the **Table of Contents** button in the sidebar. Click any TOC item to navigate to the corresponding section of the report in the Viewer. Note that the Table of Contents is only available for reports with [Bookmarks](/activereportsnet/docs/v20.1/report-authors/design-reports/design-page-rdl-reports/interactivity/bookmarks). The Table of Contents displays each value for the text box, group, or subreport that you bookmark, and you can click them to navigate to the corresponding section of the report in the Viewer. ![Table of Contents pane](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/jsviewer-toc.png)