Pdfviewer"
m ((via JWB)) |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 25: | Line 25: | ||
=Customize the Toolbar= | =Customize the Toolbar= | ||
| − | Pdfviewer accepts only one child: <toolbar>. You can customize the toolbar by adding your own | + | 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 57: | Line 57: | ||
=Enable Fullscreen= | =Enable Fullscreen= | ||
| − | Due to a specification limitation, this method must be called while responding to | + | 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> | ||
| Line 87: | Line 94: | ||
|} | |} | ||
*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 92: | Line 101: | ||
*Toolbar | *Toolbar | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class='wikitable' | width="100%" | {| class='wikitable' | width="100%" | ||
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
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 |