ComPDF
Contact Sales
DemoSampleAPI ReferenceFAQ
、

PDF Generation Template Editor

Open-source visual PDF generation engine with customizable templates and developer-friendly APIs.

View on GitHub

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

Prerequisites ​

To get started, you'll need:

  • The latest stable version of Node.js.
  • A package manager compatible with npm.
  • Apply the License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Install the ComPDF for Web package from npm into your Vanilla JS project

shell
npm i @compdfkit_pdf_sdk/webviewer --save
  1. Add the "webviewer" folder that contains the required static resource files to run the ComPDFKit Web demo, to your project’s public resource folder. The folder you need to copy is node_modules/@compdfkit_pdf_sdk/webviewer/dist.
shell
cp ./node_modules/@compdfkit_pdf_sdk/webviewer/webviewer.global.js ./
cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./webviewer
  1. Create index.html

What you need to know is that when you use the Web SDK, you need to use the parameter ""path"" to tell it where the static resources are located. If you don't do this step, then they are relative to the current path"

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='./webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
</body>
</html>
  1. Add a script tag and initialize ComPDFKitViewer for Web using Vanilla 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='./webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
​
  <script>
    let docViewer = null;
​
    ComPDFKitViewer.init({
      path: '/',
      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. In order to display on the local host, we need to set up the server environment in this step
shell
npm install -g http-server
  1. Serve Your Website
shell
http-server -a localhost -p 8080

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