Latest revision as of 06:43, 24 April 2024

Pdfviewer

Demonstration: Embed PDF Documents in Your ZK Application
Java API: Pdfviewer
JavaScript API: Pdfviewer

Available for ZK:

Since 9.0.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.

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">
  <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.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 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: PagingEvent Notifies one of the pages is selected by the user.
`onRender`	Event: Event Denotes the loading pdf file is finished rendering.
`onZoom`	Event: ZoomEvent Denotes user has changed the zoom level.
`onRotate`	Event: RotationEvent 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

Last Update : 2024/04/24

@@ Line 7: / Line 7: @@
 *JavaScript API: <javadoc directory="jsdoc">zkex.pdfviewer.Pdfviewer</javadoc>
 {{ZK PE}}
+{{versionSince|9.0.0}}
 =Employment/Purpose=
-A <tt>Pdfviewer</tt> component is based on Mozilla’s great work, [https://github.com/mozilla/pdf.js PDF.js], that renders PDF documents in the browser.
+The <code>Pdfviewer</code> component is based on Mozilla’s great work -- [https://github.com/mozilla/pdf.js PDF.js], that renders PDF documents in a browser.
 =Example=
+[[File:ZK-pdfviewer-example.png]]
 <source lang="xml" >
 <pdfviewer src="/pdf/sample.pdf" />
@@ Line 20: / Line 21: @@
 =Supported Browsers=
-It supports browsers that supporting HTML5, like IE 11, Edge, Firefox, Opera, Chrome and Safari.
+It is compatible with HTML5-supported browsers, like IE 11, Edge, Firefox, Opera, Chrome and Safari.
 =Customize the Toolbar=
-It accepts the only one child: <toolbar>. You can customize the default 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 accepts only one child: <code><toolbar></code>. 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.
 <source lang="xml">
@@ Line 39: / Line 40: @@
    </toolbar>
 </pdfviewer>
+</source>
+=Zoom to Fit Page Width / Fit Page Height=
+{{versionSince|9.6.0}}
+You can call <code>setZoom("fit-page-width")</code> or <code>setZoom("fit-page-height")</code> now.
+Or just specify it as an initial zoom level:
+<source lang="xml" >
+<pdfviewer id="pv" src="/pdf/sample.pdf" zoom="fit-page-width" />
 </source>
@@ Line 46: / Line 57: @@
 =Enable Fullscreen=
-Due to a specification limit, this method must be called while responding to user interaction (i.g. event handlers). Therefore the component only provides a client-side method <tt>toggleFullscreen()</tt> to enable the full screen mode.
+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 <code>toggleFullscreen()</code> to enable the full-screen mode.
 <source lang="xml" >
 <pdfviewer id="pv" src="/pdf/sample.pdf" />
 <button xmlns:w="client" w:onClick="zk.$('$pv').toggleFullscreen()" />
+</source>
+= 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:
+<source lang='js'>
+pdfjsLib.version
 </source>
 =Supported Events=
-{| border="1" | width="100%"
+{| class='wikitable' | width="100%"
 ! <center>Name</center>
 ! <center>Event Type</center>
 |-
-| <center><tt>onPaging</tt></center>
+| <center><code>onPaging</code></center>
 | '''Event:''' <javadoc>org.zkoss.zul.event.PagingEvent</javadoc>
 Notifies one of the pages is selected by the user.
 |-
-| <center><tt>onRender</tt></center>
+| <center><code>onRender</code></center>
 | '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 Denotes the loading pdf file is finished rendering.
 |-
-| <center><tt>onZoom</tt></center>
+| <center><code>onZoom</code></center>
 | '''Event:''' <javadoc>org.zkoss.zkex.ui.event.ZoomEvent</javadoc>
-Denotes user has changed the zoom level
+Denotes user has changed the zoom level.
 |-
-| <center><tt>onRotate</tt></center>
+| <center><code>onRotate</code></center>
 | '''Event:''' <javadoc>org.zkoss.zkex.ui.event.RotationEvent</javadoc>
 Denotes user has changed the rotation angle.
 |}
 *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 =Supported Children=
@@ Line 81: / Line 101: @@
   *Toolbar
-=Use Cases=
-{| border='1px' | width="100%"
-! Version !! Description !! Example Location
-|-
-| &nbsp;
-| &nbsp;
-| &nbsp;
-|}
-=Version History=
+{| class='wikitable' | width="100%"
-{{LastUpdated}}
-{| border='1px' | width="100%"
 ! Version !! Date !! Content
 |-
 | 9.0.0
-| August, 2013
+| October 2019
-| <javadoc>org.zkoss.zul.Audio</javadoc> now supports HTML 5
+| [https://tracker.zkoss.org/browse/ZK-4395 ZK-4395]: Provide a pdfviewer component
+|-
+| 9.6.0
+| June 2021
+| [https://tracker.zkoss.org/browse/ZK-4917 ZK-4917]: set zoom level with fit-page-width or fit-page-height in Java
 |}
 {{ZKComponentReferencePageFooter}}

Anonymous

Pdfviewer"

Namespaces

More

Page actions