Tutorials

How to Integrate ComPDFKit Web SDK in a Vanilla JavaScript App

By ComPDFKit | Thu. 23 May. 2024
PDF SDKWebJavaScript

Web applications are essential today because they run on any device with a browser, broadening accessibility and eliminating the need for separate development for different operating systems. Vanilla JavaScript offers a lightweight and efficient solution for building Web apps, avoiding the overhead and complexity of large frameworks, ensuring faster load times and improved performance.

 

ComPDFKit Web SDK is a powerful JavaScript-based PDF Library with a slick out-of-the-box responsive UI, which is ideal for developers looking to enhance web apps with powerful PDF features. In this guide, we will walk you through the step-by-step process on how to integrate ComPDFKit Web SDK into a Vanilla JavaScript project, and freely embed specific PDF functionality afterward. Let's get started!

 

integrate-compdfkit-web-sdk-in-vanilla-javascript-app

 

Prerequisites

To get started, you'll need:

  • The latest stable version of Node.js.

  • A package manager compatible with npm.

  • License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

 

Step 1. Install Webviewer into VanillaJS App

Install the ComPDFKit for Web package from npm into your VanillaJS projects.

npm i @compdfkit_pdf_sdk/webviewer --save
 
Windows   Web   Android   iOS   Mac   Server   React Native   Flutter   Electron
30-day Free

 


Step 2. Create index.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>

 

Step 3. Add Script Tag and Initialize

Add script tag and initialize ComPDFKitViewer for Web in Vanilla JavaScript.

<!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>

 

Step 4. Set a Server Environment

To show in the localhost, we need to set a server environment.

npm install -g http-server

 

Step 5. Serve Your Website

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.

 

License

ComPDFKit for Web supports flexible licensing options, please contact our sales team to know more. Each license is only valid for a root domain name and any of its subdomains. However, any documents, sample code, or source code distribution from the released package of ComPDFKit PDF SDK to any third party is prohibited.

 

Final Words

By the end of this article, you may have successfully integrated ComPDFKit for Web into your Vanilla JavaScript project and built a robust Web viewer and editor with full PDF features to meet the demands of modern Web users. If you are interested in exploring the full potential of ComPDFKit for Web, our extensive documentation provides in-depth tutorials covering a range of functionalities, including data extraction, PDF conversion, and more. It is welcome to try our Web Demo and PDF Extract Demo to experience PDF features and test how they perform.

 

Resource and Support

Windows   Web   Android   iOS   Mac   Server   React Native   Flutter   Electron
30-day Free