StencilJS Hive PDF Viewer Component Example to Display PDF Documents in Browser Using React,Vue,Angular and Ionic Full Project For Beginners

StencilJS Hive PDF Viewer Component Example to Display PDF Documents in Browser Using React,Vue,Angular and Ionic Full Project For Beginners

 

Welcome folks today in this blog post we will be building a hive pdf viewer component in stenciljs library. And that component will be used in browser using react,vue,angular and ionic. All the source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to install the below libraries using the npm command as shown below

 

npm i @teamhive/pdf-viewer

 

This web component allows you to add PDF rendering support to your web applications.

 

  • Rendering PDFs on web (Angular, Ionic, React, Stencil, etc.)
  • Search
  • Fit to Page / Fit to Width
  • Side panel for quick thumbnail navigation
READ  Node.js Project to Convert Animated GIF Image to Webp Image Using gif2webp Library Full Project For Beginners

 

Github Repository Link

 

 

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);

 

 

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.
READ  Build a Github API Username Code Repositories List Card in Vanilla Javascript Using AJAX Full Project For Beginners

 

Leave a Reply