pdf-viewer
pdf-viewer copied to clipboard
TeamMaestro
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
Hive PDF Viewer
This web component allows you to add PDF rendering support to your web applications.
Features
- Rendering PDFs on web (Angular, Ionic, React, Stencil, etc.)
- Search
- Fit to Page / Fit to Width
- Side panel for quick thumbnail navigation
Installation
npm i @teamhive/pdf-viewer
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 '@teamhive/pdf-viewer/dist/loader';
defineCustomElements(window);
Angular
Add viewer assets to angular.json assets block:
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "**/*",
"input": "node_modules/@teamhive/pdf-viewer/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. |
Events
| Event | Description |
|---|---|
linkClick(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. |
Contributors
 |
 |
 |
|---|---|---|
| Sean Bannigan | Sean Perkins | Justin True |
Metadata
76
Stars
12
Forks
Watchers
Owner
TeamMaestro
Metadata
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.