Socket
Socket
Sign inDemoInstall

pdfjs-viewer-element

Package Overview
Dependencies
0
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    pdfjs-viewer-element

A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) and . Supported in all [major browsers](https://caniuse.com/custom-elementsv1) and works with most [JS frameworks](https://custom-elements-everywhere.com/


Version published
Maintainers
1
Install size
29.2 MB
Created

Readme

Source

pdfjs-viewer-element

A custom element, based on PDF.js default viewer and . Supported in all major browsers and works with most JS frameworks. See examples of usage in Vue, React and Svelte or pure HTML.

⚠️ pdfjs-viewer-element requires PDF.js prebuilt, that includes the generic build of PDF.js and the viewer. To use the package you should download and place the prebuilt files to some directory of your project. Then specify the path to this directory with viewer-path property (/pdfjs by default).

You have full access to PDF.js viewer application using initialize method.

Status

npm version Package Quality Published on webcomponents.org

Docs

Getting started

API

Live examples

Install

Using module bundlers:

# With npm
npm install pdfjs-viewer-element
# With yarn
yarn add pdfjs-viewer-element
import 'pdfjs-viewer-element'

Using browser:

<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

Usage

<pdfjs-viewer-element src="/file.pdf" viewer-path="/path-to-viewer"></pdfjs-viewer-element>

Attributes

src - PDF file URL, should refer to the same origin

viewer-path - Path to PDF.js prebuilt

locale - Specifies which language to use in the viewer UI en-US | .... Available locales

text-layer - Text layer, that is used for text selection off | visible | shadow | hover

page - Page number

search - Search text

phrase - Search by phrase

zoom - Zoom level

pagemode - Page mode

viewer-css-theme - Apply automatic, light or dark theme AUTOMATIC | LIGHT | DARK. Default is AUTOMATIC

viewer-extra-styles - Add your CSS rules to viewer application

For more clarity, see the Api docs page.

Viewer extra styles

You can add your own CSS rules to the viewer application using viewer-extra-styles attribute:

<!-- Hide open file button -->
<pdfjs-viewer-element 
  src="/file.pdf" 
  viewer-path="/path-to-viewer"
  viewer-extra-styles="#openFile { display: none }">
</pdfjs-viewer-element>

PDF.js Viewer Application

initialize - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer

<pdfjs-viewer-element viewer-path="/path-to-viewer"></pdfjs-viewer-element>
const viewer = document.querySelector('pdfjs-viewer-element')
// Wait for the viewer initialization, receive PDFViewerApplication
const viewerApp = await viewer.initialize()
// Open PDF file data using Uint8Array instead of URL
viewerApp.open(pdfData)
// Use event bus to handle viewer application events
viewerApp.eventBus.on('pagesloaded', () => {
  console.log('Viewer pages loaded')
})

License

MIT

Keywords

FAQs

Last updated on 30 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc