TeamHive Pdf Viewer Save
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
Project README
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 |
Open Source Agenda is not affiliated with "TeamHive Pdf Viewer" Project. README Source: TeamMaestro/pdf-viewer
Stars
75
Open Issues
10
Last Commit
2 months ago
Repository
License
Open Source Agenda Badge
