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 |