From Documentation


  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png

Since 9.0.0


The Pdfviewer component is based on Mozilla’s great work -- PDF.js, that renders PDF documents in a browser.



<pdfviewer src="/pdf/sample.pdf" />

Supported Browsers

It is compatible with HTML5-supported browsers, like IE 11, Edge, Firefox, Opera, Chrome and Safari.

Customize the Toolbar

Pdfviewer accepts only one child: <toolbar>. You can customize the toolbar by adding your own one. By default, the position of the 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"

Zoom to Fit Page Width / Fit Page Height

Since 9.6.0

You can call setZoom("fit-page-width") or setZoom("fit-page-height") now.

Or just specify it as an initial zoom level:

<pdfviewer id="pv" src="/pdf/sample.pdf" zoom="fit-page-width" />

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.

Enable Fullscreen

Due to a specification limitation, this method must be called while responding to a user interaction (i.g. event handlers). Therefore the component only provides a client-side method toggleFullscreen() to enable the full screen mode.

<pdfviewer id="pv" src="/pdf/sample.pdf" />
<button xmlns:w="client" w:onClick="zk.$('$pv').toggleFullscreen()" />

Supported Events

Event Type
Event: PagingEvent

Notifies one of the pages is selected by the user.

Event: Event

Denotes the loading pdf file is finished rendering.

Event: ZoomEvent

Denotes user has changed the zoom level.

Event: RotationEvent

Denotes user has changed the rotation angle.

Supported Children


Use Cases

Version Description Example Location

Version History

Last Update : 2022/09/20

Version Date Content
9.0.0 October 2019 ZK-4395: Provide a pdfviewer component
9.6.0 June 2021 ZK-4917: set zoom level with fit-page-width or fit-page-height in Java

Last Update : 2022/09/20

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.