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. |
Author: TeamHive
Source Code: https://github.com/TeamHive/pdf-viewer
#react #reactjs #javascript