Introduction

PDF (Portable Document Format) is a common format used in various documents and is supported by a variety of devices.

To view PDF files, you normally need a viewer software such as Adobe Reader. Thanks to HTML5, it is now possible to view them directly in the browser without having to install anything.

This PDFViewer component is based on Mozilla’s great work, PDF.js, that renders PDF documents in the browser. You can use it to embed PDF documents in your ZK application and let users view PDF documents inside the application without leaving the browser and going to an external application. This makes any workflow involving viewing PDF files much smoother.

Demo

This demo simply demonstrates how you can use this component in your ZK application. Combining with the Signature component, it can be useful for building an approval workflow.

Required Configuration

Version

• ZK 8.0.0 or later

ZUL

<zk>
  <pdfviewer id="pv1" hflex="1" vflex="1"
             src="/pdf/sample.pdf" />
</zk>

PDFViewer Component

We provide several API methods / events for this component:

• setActivePage(int page)
  Sets the current active page number (0 based).
• firstPage() / previousPage() / nextPage() / lastPage()
  Navigate to the first / previous / next / last page.
• setSrc(String src)
  Sets the PDF location.
• setContent(Media content)
  Sets the Media (should be a PDF). Will override setSrc().
• setRotation(int rotation)
  Sets the rotation degrees. Allowed values: 0, 90, 180, 270.
• rotateClockwise() / rotateCounterclockwise()
  Rotate the document by 90 degrees clockwise or counterclockwise.
• setZoom(double zoom)
  Sets the zoom level. 1.0 means 100%.
• zoomIn() / zoomOut()
  Zoom in / out by 10%.
• onRender (Event)
  An Event will be triggered once the PDF document is loaded and rendered properly.
• onPaging (PagingEvent)
  A PagingEvent will be triggered while the current page is changed.
• onZoom (ZoomEvent)
  A ZoomEvent will be triggered while the zoom level is changed.
• onRotate (RotateEvent)
  A RotateEvent will be triggered while the current rotation is changed.

Customize the Toolbar

PDFViewer accepts the only one child: <toolbar>. You can customize the default toolbar by adding your own one. By default, the position of toolbar is at the top. You can use CSS to do more tweaks.

<pdfviewer id="pv2">
  <toolbar>
    <toolbarbutton iconSclass="z-icon-fw z-icon-fast-backward"
                   onClick="pv2.firstPage()"/>
    <toolbarbutton iconSclass="z-icon-fw z-icon-chevron-left"
                   onClick="pv2.previousPage()"/>
    <toolbarbutton iconSclass="z-icon-fw z-icon-chevron-right"
                   onClick="pv2.nextPage()"/>
    <toolbarbutton iconSclass="z-icon-fw z-icon-fast-forward"
                   onClick="pv2.lastPage()"/>
  </toolbar>
</pdfviewer>

Cross-Origin Resource Sharing (CORS)

If you want to load a remote PDF document, please make sure the response headers contain the necessary CORS headers or it won’t be allowed to be loaded.

Downloads

The whole demo project can be found on the GitHub project and we welcome you to try it out and share with us your feedback.

This component is currently in beta. If you are interested in using this component please contact us at [email protected].