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

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

In a stencil-starter app

• Run npm install web-component-pdfviewer --save
• Add an import to the npm packages import web-component-pdfviewer;
• Then you can use the element anywhere in your template, JSX, html etc