@dbp-toolkit/pdf-viewer

PdfViewer Web Component

GitHub | NPM

This component is a wrapper around the pdf.js library to display PDF files in the browser.

You can install this component via npm:

npm i @dbp-toolkit/pdf-viewer

Usage

<dbp-pdf-viewer></dbp-pdf-viewer>
<script type="module" src="node_modules/@dbp-toolkit/pdf-viewer/dist/dbp-pdf-viewer.js"></script>

Or directly via CDN:

<dbp-pdf-viewer></dbp-pdf-viewer>
<script type="module" src="https://unpkg.com/@dbp-toolkit/pdf-viewer@0.0.7/dist/dbp-pdf-viewer.js"></script>

Attributes

• lang (optional, default: de): set to de or en for German or English
  • example <dbp-pdf-viewer lang="de" client-id="my-client-id"></dbp-pdf-viewer>
• auto-resize (optional, default: cover)
  • set to contain to resize the viewed PDF to fit the container horizontally and vertically
  • set to cover to resize the viewed PDF to fit the container horizontally only, vertically the PDF can exceed the container
  • example <dbp-pdf-viewer auto-resize="contain"></dbp-pdf-viewer>

Methods

• showPDF(file: File): Opens a PDF file. The file must be a File object.
  • example document.querySelector('dbp-pdf-viewer').showPDF(file);

Screenshot

Opening a PDF file

You can use the showPDF method to open a PDF file. This method accepts a File object as parameter.

<input @change=${this.openFile} type="file" />
<dbp-pdf-viewer lang="en"></dbp-pdf-viewer>
<script type="module" src="https://unpkg.com/@dbp-toolkit/pdf-viewer@0.0.7/dist/dbp-pdf-viewer.js"></script>

<script>
  document.querySelector('input').addEventListener('change', function(e) {
    if (e.target.files[0]) {
      let file = e.target.files[0];

      console.log('You selected ' + file.name);
      document.querySelector('dbp-pdf-viewer').showPDF(file);
    }
  });
</script>

See example/index.html for a working example.

Local development

# get the source
git clone [e-mail]:digital-blueprint/toolkit.git
cd toolkit/packages/pdf-viewer

# install dependencies
npm install

# constantly build dist/bundle.js and run a local web-server on port 8002 
npm run watch

# run tests
npm test

# build local packages in dist directory
npm run build

Jump to http://localhost:8002 and you should get a demo page.