ComPDFKit
Get TrialContact Sales
DemoFAQTechnical Support
Guides

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

This section will help you to quickly get started with ComPDFKit for Web 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.

Integrate into a Vanilla JavaScript Project ​

  1. Create index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComPDFKit Web Viewer</title>
</head>
<!-- Import WebViewer as a script tag -->
<script src='@compdfkit/webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
</body>
</html>
  1. Add script tag and initialize ComPDFKitViewer for Web in JavaScript
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComPDFKit Web Viewer</title>
</head>
<!-- Import WebViewer as a script tag -->
<script src='@compdfkit/webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>

  <script>
    let docViewer = null;

    ComPDFKitViewer.init({
      pdfUrl: '/webviewer/example/developer_guide_web.pdf',
      license: 'Input your license here'
    }, document.getElementById('app')).then((core) => {
      docViewer = core.docViewer;

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      })
    })
  </script>
</body>
</html>
  1. Set a server environment To show in the localhost, we need to set a server environment;
bash
npm install -g http-server
  1. Serve your website
bash
http-server -a localhost -p 8080

Open http://localhost:8080 on your browser. Then you will be able to see the PDF file you want to display.

Integrate into a Vue Project ​

Add ComPDFKit for Web 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 for Web and will be imported into your project.

  2. Add the "webviewer" folder that contains the required static resource files to run the ComPDFKit Web 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 for Web in your project by calling ComPDFKitViewer.init().

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

javascript
// Import the JS file of ComPDFKit Web Demo.
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 Demo');
  })
})

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

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