How to Make a Web App in JavaScript With ComPDFKit Web Viewer ​

This section will help you to quickly get started with ComPDFKit Web Viewer to make a Web app with step-by-step instructions. Through the following steps, you will get a simple web application that can display the contents of a specified PDF file.

Before you start the following steps, create a new web project first.

Add ComPDFKit Web Viewer Package ​

1. Add the @compdfkit folder in the lib directory to the root directory or assets directory of your project. This will serve as the entry point for the ComPDFKit Web Viewer and will be imported into your project.

Add the webviewer folder that contains the required static resource files to run the ComPDFKit Web Viewer demo, to your project’s static resource folder.

Display a PDF Document ​

1. Import the “webviewer.js” file in the @compdfkit folder into your project.

2. Initialize the ComPDFKit Web Viewer in your project by calling ComPDFKitViewer.init().

3. Pass the PDF address you want to display and your license key into the init function.

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Viewer loaded');
  })
})

Note: You need to contact ComPDFKit team to get the license.

4. Once your project is running, you will be able to see the PDF file you want to display.