Pdfviewer"
m (→Example: Add an Image) |
|||
(5 intermediate revisions by 2 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}} | ||
+ | since 9.0.0 | ||
=Employment/Purpose= | =Employment/Purpose= | ||
− | + | The <tt>Pdfviewer</tt> 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 | + | It is compatible with HTML5-supported browsers, like IE 11, Edge, Firefox, Opera, Chrome and Safari. |
=Customize the Toolbar= | =Customize the Toolbar= | ||
− | + | Pdfviewer accepts only one child: <toolbar>. You can customize the toolbar by adding your own toolbar. 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 46: | Line 47: | ||
=Enable Fullscreen= | =Enable Fullscreen= | ||
− | Due to a specification | + | 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 <tt>toggleFullscreen()</tt> to enable the full screen mode. |
<source lang="xml" > | <source lang="xml" > | ||
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 | ||
− | | | + | | October 2019 |
− | | | + | | [https://tracker.zkoss.org/browse/ZK-4395 ZK-4395]: Provide a pdfviewer component |
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 02:54, 19 November 2019
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 toolbar. 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 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: 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. |
- Inherited Supported Events: XulElement
Supported Children
*Toolbar
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|
9.0.0 | October 2019 | ZK-4395: Provide a pdfviewer component |