Web-component-pdfviewer NPM

PDF Viewer Web Component

This component can view a PDF file online in the browser. Dynamic Web TWAIN is used as the backend. It can also scan documents and save them as a PDF file.

Online demo

Usage

In your HTML, add the component:

<pdf-viewer></pdf-viewer>

You can define the props as attributes.

<pdf-viewer 
  showthumbnailviewer="true"
  url="./sample.pdf"
></pdf-viewer>

You can also do it using JavaScript.

const PDFViewer = document.querySelector('pdf-viewer');
PDFViewer.url = "./sample.pdf";
PDFViewer.showthumbnailviewer = "true";
PDFViewer.uselocalservice = "true"; //use local service to enable document scanning with scanners.
PDFViewer.license = "<your license>"; //otherwise, use a one-day trial
const webTWAINReady = async (e) => {
  DWObject = e.detail;
}
PDFViewer.addEventListener("webTWAINReady",webTWAINReady);

Install this component

Script tag

Put a script tag similar to this

<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/web-component-pdfviewer/dist/esm/loader.js';
  defineCustomElements();
</script>

in the head of your index.html

Then you can use the element anywhere in your template, JSX, html etc

Node Modules

Run npm install web-component-pdfviewer --save

Put a script tag similar to this

<script type="module">
  import { defineCustomElements } from 'node_modules/web-component-pdfviewer/dist/esm/loader.js';
  defineCustomElements();
</script>

in the head of your index.html