Skip to content

README.md

Latest commit

 

History

History
202 lines (126 loc) · 10.8 KB

README.md

File metadata and controls

202 lines (126 loc) · 10.8 KB

ComPDF SDK for Web (Vanilla JavaScript Example)

As part of the KDAN ecosystem, ComPDF SDK for Web is a powerful JavaScript-based PDF library that enables developers to easily add PDF viewing, annotation, editing, and more to their applications across multiple frameworks including Vanilla JavaScript, Vue.js, React, Angular, Next.js, Nuxt.js, and more — with just a few lines of code.

If you find this library helpful, please consider giving us a ⭐ Star on GitHub! Have feedback or questions? Join the conversation in our Discussions.

webui

Why ComPDF SDK?

  • Easy to Integrate: Clear docs and a powerful JavaScript API let you add PDF features in just a few lines of code.

  • Fully Customizable UI: Ship your own look and feel with source-level control over every UI element.

  • Comprehensive PDF Features: View, annotate, edit, convert, OCR, redact, sign, compress, compare, and more — all in one SDK.

  • 5×24 Expert Support: One-to-one technical assistance via email, phone, and on-site service.

Table of Contents

Supported Features

  • Viewer:

    • Fast and smooth PDF rendering and viewing
    • Display Modes - single/double page, vertical & horizontal scrolling, cover mode, crop mode
    • Text Search & Selection
    • PDF Navigation - outlines, bookmarks

  • Annotations:

    • Notes - add longer comments with adjustable icon shape and color

    • Ink - freehand drawing with customizable color, opacity, line thickness

    • Text - add, move, resize text directly on page

    • Inspector - adjust annotation looks (line styles, borders, colors, opacity, font)

    • Comment on Annotations and Update Status

    • Import & Export & Flatten Annotations (XFDF, FDF, JSON)

    • Highlight, Underline, Strikeout, Squiggly

    • Shapes - Rectangle, Oval, Line, Arrow, Polygon, Polyline, Cloud

    • Stamps, Sound, Movie, File Attachment, Link, Distance, Perimeter, Area

  • Document Editor:

    • Page manipulation - insert, delete, rotate, reorder, extract, crop
    • Split PDF, Merge PDF

  • Content Editor: Edit PDF text and images directly like in Word

  • Signatures:

    • Electronic Signatures - draw, type, image signatures
    • Digital Signatures - certificate-based signature validation

  • Forms:

    • Process fillable and static PDF forms
    • Form filling, form creation, form flattening

  • Security:

    • Encryption - set open password, permission password
    • Restrict printing, copying, editing

  • Redaction: Permanently remove sensitive content from PDFs

  • Layers: View, edit, display, lock, and export specific layers within a file

  • Color Separation: Identify color models like CMYK, PMS. Toggle color visibility and view details.

  • Measurement: Distance, area, perimeter measurement tools

  • Compare Documents: Side-by-side document comparison to highlight differences

How to Make a PDF Web Viewer App with JavaScript

Prerequisites

  • 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.

Add ComPDF for Web

  1. Create a new project folder and install the webviewer package:
mkdir compdfkit-app
cd compdfkit-app
npm init -y
npm i @compdfkit_pdf_sdk/webviewer --save
  1. Copy the static resource files:
cp ./node_modules/@compdfkit_pdf_sdk/webviewer/webviewer.global.js ./
cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./webviewer

Display a PDF

  1. Add your PDF document to the webviewer/example directory.

  2. Create index.html with the following code:

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

Run the App

npm install -g http-server
http-server -a localhost -p 8080

Open http://localhost:8080 on your browser.

Free Trial and License

Replace the <Input your license here> field in the index.html with the license you get from our Team.

ComPDF SDK for Web supports flexible licensing options. You can apply for a license online to use it, reducing the process of contacting the service team and saving you time. If you need more information, you can contact our sales team. Each license is valid only for the root domain name and any of its subdomains.

The license we provide on Github can only run the demo. If you want to integrate our Web PDF SDK into your own Vanilla JavaScript project, please apply for a free trial license on the website.

Please note that it is not allowed to distribute any documents, sample code, or source code from the ComPDF SDK package to third parties.

Changelog

Go to our changelog to keep up with the latest updates, improvements, and bug fixes.

Support

ComPDF has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.

  • For detailed information, please visit our Guides page.

  • For technical assistance, please reach out to our Technical Support.

  • To get more details and an accurate quote, please contact our Sales Team.

Note

We are glad to announce that you can register a ComPDF API account for a free trial to process 200+ API calls per month for free.

Related