Pdfviewer"

From Documentation
m (→‎Example: Add an Image)
m (Header / Footer)
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}}
 +
since 9.0.0
  
 
=Employment/Purpose=
 
=Employment/Purpose=
Line 69: Line 70:
 
| <center><tt>onZoom</tt></center>
 
| <center><tt>onZoom</tt></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><tt>onRotate</tt></center>
Line 98: Line 99:
 
|-
 
|-
 
| 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
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 07:57, 16 October 2019

Pdfviewer

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

Employment/Purpose

A Pdfviewer component is based on Mozilla’s great work, PDF.js, that renders PDF documents in the browser.

Example

ZK-pdfviewer-example.png

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

Supported Browsers

It supports browsers that supporting HTML5, 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 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>

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

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

Use Cases

Version Description Example Location
     

Version History

Last Update : 2019/10/16


Version Date Content
9.0.0 October 2019 ZK-4395 Provide a pdfviewer component



Last Update : 2019/10/16

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