Documentation
Topics
Viewer
PDFViewer
5.20231.904
5.20231.904

HTML PDF Viewer

The wijmo.viewer module contains 2 types of viewers: PdfViewer and ReportViewer. The PdfViewer is a lightweight viewer used to display PDFs without any third party PDF reader or software. You can use it to display PDF documents in your web apps.

  • Includes top document viewer features like thumbnail display, scrolling, paging, and zooming
  • Print support
  • Export features

Features

Every feature you’d expect from a document viewer is included out-of-the-box:

  • Print support
  • Responsive viewer
  • Thumbnails
  • Search
  • Pagination
  • Full-screen and resizing options
  • Continuous scrolling options

Basics

To show the PDF file from C1 Web API PDFDocument Services, set the following basic properties:

  1. serviceUrl: The url of C1 Web API PDFDocument Services. For example, ''.

  2. filePath: The full path to the pdf file. For example, 'PdfRoot/DefaultDocument.pdf'.

    The 'PdfRoot' is the key of the pdf file disk storage provider, which is registered at server for locating the specified pdf file. The 'DefaultDocument.pdf' is the relative path of the pdf file, which can be located by the disk storage provider.

Example
<body>
    ...
    <div id="pdfViewer"></div>
    ...
</body>

let pdfViewer = new viewer.PdfViewer('#pdfViewer', {
        serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/pdf',
        filePath: 'PdfRoot/DefaultDocument.pdf',
        zoomFactorChanged: (sender) => {
            zoomFactor.value = sender.zoomFactor;
        }
});

The C1 Web API PDFDocument Services uses C1PdfDocumentSource to render and export pdf files. Please refer to How to set up C1 Web API PDFDocument Services for details.

Also the PdfViewer control has the following properties, which allow you to customize its appearance and behavior:

  • fullScreen: Indicates whether the viewer is under full screen mode.
  • mouseMode: Indicates the mouse behavior.
  • viewMode: Indicates how to show the document pages.
  • zoomFactor: Indicates the current zoom factor to show the document pages.
Example
pdfViewer.fullScreen = true;
pdfViewer.mouseMode = wijmo.viewer.MouseMode.MoveTool;
pdfViewer.viewMode = wijmo.viewer.zoomMode.WholePage;