pdf-viewer's Introduction

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.