How to Build a Web PDF Viewer or Editor

By ComPDFKit | 2023 Apr 26
Web JavaScript

In today's web-rich environment, working with PDF documents has become a necessity for businesses and developers alike. With ComPDFKit, a powerful PDF SDK that supports web platform, developers can create PDF viewers and editors that enable your end users to view and edit PDFs with ease. Whether you are building a web-based document management system or an online collaboration platform, ComPDFKit provides the tools and features you need to take your application to the next level.


In this blog, we'll start by exploring the necessary steps to integrate the ComPDFKit PDF SDK and build a Web PDF Reader with ComPDFKit.



Get Started with ComPDFKit Web PDF SDK


ComPDFKit is a powerful PDF SDK. It is easy to embed ComPDFKit PDF SDK in your Web application with a few lines of Javascript code. Take just a few minutes and get started.


The following sections introduce the requirements, structure of the installation package, and how to make a Web PDF Reader in Javascript with ComPDFKit PDF SDK.




ComPDFKit Web Viewer doesn't depend on Node.js and npm, but they are required when run the demo.

         - The latest stable version of Node.js.

         - You should installed Node.js and npm before running the demo.


Web Package Structure


You can contact us to access our PDF SDK installation package. Download and decompress the package of ComPDFKit PDF SDK for Web. You will see all the following files in the SDK package.

         - ComPDFKit-Web-Viewer-Demo - A folder containing Web sample projects.

         - lib - Include ComPDFKit Web Viewer library.

         - ComPDFKit Web Viewer.md - Developer guide and API reference.

         - Core&UI.txt - Third-party code usage agreement.

         - legal.txt - Legal and copyright information.

         - release_note.txt - Release information.


Web package



Make a Web PDF Viewer in JavaScript


This section will help you to quickly get started with ComPDFKit PDF SDK to make a Web app in Javascript 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.


Step 1: Add ComPDFKit PDF SDK 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. 


2. Add the webviewer folder that contains the static resource files required for running the ComPDFKit Web Viewer, and the example folder that contains sample PDF files to your project’s static resource folder.


Step 2: 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 to the init function.

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  console.log('ComPDFKit Web Viewer loaded');


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





If you meet some problems when integrating our ComPDFKit PDF SDK for Web, feel free to contact ComPDFKit team.