web-component-pdfviewer
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

Built With Stencil

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

Package Sidebar

Install

npm i web-component-pdfviewer

Weekly Downloads

139

Version

1.1.2

License

MIT

Unpacked Size

25.2 MB

Total Files

99

Last publish

Collaborators

  • xulihang