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.


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


  • ZK 8.0.0 or later


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

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">
    <toolbarbutton iconSclass="z-icon-fw z-icon-fast-backward"
    <toolbarbutton iconSclass="z-icon-fw z-icon-chevron-left"
    <toolbarbutton iconSclass="z-icon-fw z-icon-chevron-right"
    <toolbarbutton iconSclass="z-icon-fw z-icon-fast-forward"

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.


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]


If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

5 Responses to “[ZK 9 Preview] Embed PDF Documents in Your ZK Application”

  1. Jose Walker says:

    Is this version working with ZK 8.6.3 version?

  2. jeanyen says:

    This is a ZK 9 component so you will have to upgrade to ZK 9 to officially use it.

  3. Alberto Jimenez Ruiz says:

    Hi! I’m not able to make Pdfviewer.setContent(Media) work. Is there any project using this method? Or could anyone provide an example?

  4. MDuchemin says:

    @Alberto Jimenez Ruiz
    The demo linked here uses setSrc() in zul directly by passing urls of the pdf files directly on the webserver.

    That would be the standard use if your source PDF is a file in your project directory.

    You would only need to use setContent if you want to display content from memory rather than filesystem.
    See the media API for more details on Media objects:
    For example, you will retrieve a Media (an in-memory representation of a file, from a file upload:

    such as: (fiddle doesn’t support zk9 yet, just using it as a way to paste code)

  5. Daniel says:

    Can I load all the pages at the same time? not just 1 and do paging?

Leave a Reply