Pdfviewer"

From Documentation
m (→‎Example: Add an Image)
 
(11 intermediate revisions by 3 users not shown)
Line 7: Line 7:
 
*JavaScript API: <javadoc directory="jsdoc">zkex.pdfviewer.Pdfviewer</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.pdfviewer.Pdfviewer</javadoc>
 
{{ZK PE}}
 
{{ZK PE}}
 +
{{versionSince|9.0.0}}
  
 
=Employment/Purpose=
 
=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=
 
=Example=
Line 20: Line 21:
 
=Supported Browsers=
 
=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=
 
=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">
 
<source lang="xml">
Line 39: Line 40:
 
   </toolbar>
 
   </toolbar>
 
</pdfviewer>
 
</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>
 
</source>
  
Line 46: Line 57:
  
 
=Enable Fullscreen=
 
=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" >
 
<source lang="xml" >
 
<pdfviewer id="pv" src="/pdf/sample.pdf" />
 
<pdfviewer id="pv" src="/pdf/sample.pdf" />
 
<button xmlns:w="client" w:onClick="zk.$('$pv').toggleFullscreen()" />
 
<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>
 
</source>
  
 
=Supported Events=
 
=Supported Events=
  
−
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
−
| <center><tt>onPaging</tt></center>
+
| <center><code>onPaging</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zul.event.PagingEvent</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zul.event.PagingEvent</javadoc>
 
Notifies one of the pages is selected by the user.
 
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>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
Denotes the loading pdf file is finished rendering.
 
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>
 
| '''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>
 
| '''Event:''' <javadoc>org.zkoss.zkex.ui.event.RotationEvent</javadoc>
 
Denotes user has changed the rotation angle.
 
Denotes user has changed the rotation angle.
 
|}
 
|}
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 +
 +
  
 
=Supported Children=
 
=Supported Children=
Line 81: Line 101:
 
  *Toolbar
 
  *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
 
! Version !! Date !! Content
 
|-
 
|-
 
| 9.0.0
 
| 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}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 06:43, 24 April 2024


DocumentationZK Component ReferenceMultimedia and MiscellaneousPdfviewer
Pdfviewer

Pdfviewer

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

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

ZK-pdfviewer-example.png 

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


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

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Multimedia_and_Miscellaneous/Pdfviewer&oldid=57117"