PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
MIT License
This web component allows you to add PDF rendering support to your web applications.
npm i @teamhive/pdf-viewer
<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);
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.
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. |
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. |
Sean Bannigan | Sean Perkins | Justin True |