@teamhive/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