@teamhive/pdf-viewer

PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.

Showing:

Popularity

Downloads/wk

119

GitHub Stars

68

Maintenance

Last Commit

1yr ago

Contributors

3

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Vue PDF Viewer

Readme

Built With Stencil

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

PropertyDefaultDescription
srcThe PDF web address location (http, https)
page1The default page index.
enableToolbartrueIf the toolbar is available for display.
enableSideDrawertrueIf the side drawer UI (and button) is available for display.
enableSearchtrueIf the document can be searched through. Hides the button when false.

Events

EventDescription
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 BanniganSean PerkinsJustin True
Sean BanniganSean PerkinsJustin True

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial