2.7.0 • Published 6 years ago
pdf-viewer-st v2.7.0
Hive PDF Viewer
This web component allows you to add PDF rendering support to your web applications.
Forked from: @teamhive/pdf-viewer.
Up to date 2.4.0.
This repository will only be active as long as the official component does not support these new features.
Features
- Rendering PDFs on web (Angular, Ionic, React, Stencil, etc.)
- Search
- Fit to Page / Fit to Width
- Side panel for quick thumbnail navigation
- Text selection
- Swipe events (left/right) to show/hide the side drawer
- Pinch events (in/out) to performs zoom in/out in the document
Installation
npm i pdf-viewer-st
Usage
<hive-pdf-viewer src="http://www.mydomain.com/example.pdf"></hive-pdf-viewer>Somewhere in your project (e.g. main.ts):
import { defineCustomElements } from 'pdf-viewer-st/dist/loader';
defineCustomElements(window);Angular
Add viewer assets to angular.json assets block:
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "**/*",
"input": "node_modules/pdf-viewer-st/dist/pdf-viewer/pdf-viewer-assets",
"output": "pdf-viewer-assets"
}Follow the Stencil JS Framework Integration guide for more info.
Properties
| Property | Default | Description |
|---|---|---|
src | The PDF web address location (http, https) | |
page | 1 | The default page index. |
enableToolbar | true | If the toolbar is available for display. |
enableSideDrawer | true | If the side drawer UI (and button) is available for display. |
enableSearch | true | If the document can be searched through. Hides the button when false. |
disableScrolling | false | Disables scrolling in the document. |
enableSwipe | true | If swipe events (left/right) are recognise to show/hide the side drawer. |
enablePinch | true | If pinch events (in/out) are recognise to performs zoom in/out. |
Events
| Event | Description |
|---|---|
onLinkClick(href: string) | Emits the href clicked when it's not an internal document annotation. |
pageChange(currentPage: number) | Emits the current page number when the current page changes. |
selectedText(selection: Selection) | Emits the current selection by user. |
Contributors
| Sean Bannigan | Sean Perkins | Justin True |