Pdfviewer

Demonstration: Embed PDF Documents in Your ZK Application
Java API: org.zkoss.zkex.zul.Pdfviewer
JavaScript API: zkex.pdfviewer.Pdfviewer

since 9.0

Employment/Purpose

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

Example

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

Supported Browsers

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

Pdfviewer accepts only one child: . 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">
  <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>

Zoom to Fit Page Width / Fit Page Height

since 9.6

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" />

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 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()" />

Underlying Library

This component depends on https://github.com/mozilla/pdf.js. To check the bundled pdfjs version, open a browser developer tool > Console tab, and run the code below:

pdfjsLib.version

Supported Events

Name	Event Type
`onPaging`	Event: [org.zkoss.zul.event.PagingEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/event/PagingEvent.html) Notifies one of the pages is selected by the user.
`onRender`	Event: [org.zkoss.zk.ui.event.Event](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/Event.html) Denotes the loading pdf file is finished rendering.
`onZoom`	Event: [org.zkoss.zkex.ui.event.ZoomEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkex/ui/event/ZoomEvent.html) Denotes user has changed the zoom level.
`onRotate`	Event: [org.zkoss.zkex.ui.event.RotationEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkex/ui/event/RotationEvent.html) Denotes user has changed the rotation angle.

Inherited Supported Events: XulElement

Supported Children

*Toolbar

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

Twitter Facebook LinkedIn