teammaestro/pdf-viewer

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

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

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

pdf-viewer's Issues

t.resolve is not a function

I am trying to test the component in an ionic v3 app by following these instructions to set things up.

However I have the following error when opening a page with the hive-pdf-viewer on it.

TypeError: t.resolve is not a function
    at Object.setNativePromise (polyfills.js:3)
    at L.configurable.L.set (polyfills.js:3)
    at module.exports (hive-pdf-viewer.js:79796)
    at $export (hive-pdf-viewer.js:79858)
    at hive-pdf-viewer.js:80943 "http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js"

The www directory looks like this with the pdfviewer files:

System info:

 @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.11.3
    npm  : 6.3.0
    OS   : Windows 10

Pinch-zoom destroys whole Capacitor container

Hey Sean,

as discussed on Slack, here‘s the issue.

I‘m using the team hive PDF viewer. I think it uses an iFrame under the hood. When it is open my pure Stencil app can be pinch-zoomed. This affects the whole app container of Capacitor. Any idea how this can be prevented.

You said:
Capacitor should prevent the web view pinch to zoom. However we haven’t baked that into the component yet. It is on our roadmap in the next few months.

See attached video.

I think you can re-pro without a test case repo?
Let me know!

Thanks,
Matt

ionic4+angular6 PDF loading is not stable

pdfviewer.js:59 GET https://js.arcgis.com/4.8/pdfviewer/pdfviewer.core.js 404 ()

Feature request: text selection

Hi!
Would be nice have a way to get selected text by user.

'hive-pdf-viewer' is not a known element:

[Angular]
'hive-pdf-viewer' is not a known element:

1. If 'hive-pdf-viewer' is an Angular component, then verify that it is part of this module.
2. If 'hive-pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

ionic3 blank

not error，ionViewDidLoad load ， page is blank

Unnecessary files in published package

Need to remove most of assets found in pdf-viewer/dist/pdf-viewer/pdfiv-ewer-assets/viewer/web.

This custom wrapped package doesn't use the base pdf.js:

• Images
• Locales
• Fonts
• Example compressed pdf

ES5 error in Capacitor 2.4.6/Stencil 2.0.3 environment

Hey guys,

upgraded an app that uses your pdf-viewer. On Android I'm getting this in the dev console:

viewer.html:1 Uncaught (in promise) 
UnknownErrorException {message: "The browser/environment lacks native support for c…ed`); please use an ES5-compatible build instead.", name: "UnknownErrorException", details: "Error: The browser/environment lacks native suppor…ed`); please use an ES5-compatible build instead."}
details: "Error: The browser/environment lacks native support for critical functionality used by the PDF.js library (e.g. `ReadableStream` and/or `Promise.allSettled`); please use an ES5-compatible build instead."
message: "The browser/environment lacks native support for critical functionality used by the PDF.js library (e.g. `ReadableStream` and/or `Promise.allSettled`); please use an ES5-compatible build instead."
name: "UnknownErrorException"
__proto__: Error

In the component it shows:

Continues to work on ios as it did on Android the last year with Capacitor 1.5.

Should I maybe add ES5 build to my output?

Cannot read properties of undefined (reading 'initializedPromise')

Hi!

I downloaded this basic example of the library https://react-gdbl8p.stackblitz.io and it throws the following error

In the example the version of the library is 3.0.0 , i tried to update to the latest 4.2.0 but is not working

Can you take a look ?

Thanks

Do you support local files open?

Support for local files to open files like path: file:///D:/pdftest/HGH-18123.pdf
Support for local files to open files like path: file:///D:/pdftest/HGH-18123.pdf
  Is there any ionic3 integration support? I see ng2-pdf-viewer support but does not support the opening of local file files.

Feature request: Add Pinch to Zoom feature

Would be nice if Multi-touch devices could do Pinch to Zoom instead of using zoom buttons.

Android API 24 Unload Error

Tracking an Android bug that is prominent on API 24 when unloading the PDF.

Cannot read property `cleanup` of undefined.

PDFApplication is disposed prior to the unload event being fired for older devices. Need to provide a safety check that it exists prior to calling:

https://github.com/TeamHive/pdf-viewer/blob/development/src/components/pdf-viewer/pdf-viewer.tsx#L92

He is good on the browser When I run to my phone, he will report the following error.

He is good on the browser
When I run to my phone, he will report the following error.
Unable to open asset URL: file:///android_asset/www/assets/fonts/roboto-bold.woff2
Unable to open asset URL: file:///android_asset/www/assets/fonts/roboto-bold.woff
Unable to open asset URL: file:///android_asset/www/assets/fonts/roboto-bold.ttf
Why is this so?
@natenorm @jpinkster @db3dev @sean-perkins @sbannigan

Feature request: open BLOB

Could you please add support for passing BLOB instead of URL of a file?
PDFjs already supports this (https://mozilla.github.io/pdf.js/examples/ look under Hello World using base64 encoded PDF section).

Try to use it in a Stencil JS application.

Hi,
I'm trying to use it in a Stencil JS application.

I followed the installation guide.

But I have these errors:

Can you help me? Thanks

Feature request: custom button and custom handler

ie. Your app requires users to read and accept a PDF contract

1. User accesses the contract page, bringing up the contract PDF with stencil-pdf-viewer
2. In the PDF viewer, there is an additional, custom button (in this case, indicating that they are accepting the contract)
3. When they click this button, it activates the custom handler set in the client (in this case, brings up an 'Are you sure modal?' and closes the PDF viewer upon acceptance, passing the view back to the original caller)

file： file:///data/data/com.mhc.qccenter/files/HGH-18123.pdf

TypeError: Cannot read property 'querySelector' of nul
TypeError: Cannot read property 'querySelector' of null", source: file:///android_asset/www/build/main.js (178928)