In today's web-rich environment, the need for robust PDF viewers and editors within web applications has become indispensable. From delivering seamless PDF ebook previews on literary websites to facilitating effortless document reviews on government portals and resource hubs, handling PDF documents is a critical aspect of modern projects.
This article serves as a guide for developers to create PDF viewers and editors using the ComPDFKit JavaScript PDF Library, enabling your users to easily view and edit PDF files directly on your website. Additionally, we explored more integration examples in other articles, such as setting up a JavaScript PDF Editor, implementing a PDF image editor, and more.
Requirements of Building PDF Webviewer
To get started with your JavaScript PDF Program, ensure you have the following prerequisites:
-
The latest stable version of Node.js.
-
A package manager compatible with NPM.
-
License Key of ComPDFKit PDF Viewer Library in JavaScript: Get a free 30-day license for your PDF Viewer project on ComPDFKit website (Without Sales).
Step1: Get JavaScript PDF Reader Library
Choose a place to download the latest JavaScript PDF Library of ComPDFKit
-
GitHub: Access and clone the repository from GitHub to get sample implementations and the SDK package.
-
NPM: Install the package directly from NPM and include it in your project.
Step2: Get a License of ComPDFKit JavaScript PDF Viewer
License of ComPDFKit SDK for Web can be obtained directly from the ComPDFKit Website: Go to the Pricing page > Choose ComPDFKit for Web > Click Get Your Trial License button. Finally, check your email inbox and get the 30 days trial license form the attach file.
Step 3: Add PDF JavaScript Reader Library of ComPDFKit
This tutorial guides you on how to integrate a JavaScript PDF Reader into your Vanilla JavaScript project. For more detailed integration instructions, including how to add the JavaScript PDF Library to frameworks like Vue, React, Angular, Next,js, Nuxt.js, Svelte, and SvelteKit, visit the PDF Library’s JavaScript documentation.
Create a new web project first if you don’t have a Vanilla project.
1. 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 4: Apply the License to Read PDF in JavaScript
Accurately obtaining the license key is crucial for the application of the license. In the email you received, locate the license key. If it is an XML file, it is an offline license. Otherwise, it is an online license.
1. Offline License:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<license version="1">
<platform>web</platform>
<starttime>xxxxxxxx</starttime>
<endtime>xxxxxxxx</endtime>
<key>LICENSE_KEY</key>
</license>
Copy the value located at the LICENSE_KEY position within the <key>LICENSE_KEY</key> field. This is your license key. You can fill in the license with the key in the init function to apply the license key:
// 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');
})
2. Online License:
Online licensing supports dynamically updating license information. If we provide you with new services, you can obtain updates in real time without any modifications.
Step 5: Run Your JavaScript PDF Reader
When using the Web SDK, you need to use the path parameter to tell it where the copied static resources are located, if not, they will be relative to the current path. Add script tag and initialize ComPDFKit Viewer for Web in 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({
path: '/',
pdfUrl: './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>
Set a server environment. To show in the localhost, we need to set a server environment;
npm install -g http-server
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.
Initialize JavaScript PDF Editor
Initialize the PDF Editor mode to edit PDF Text and images.
docViewer.getContentEditManager().startContentEditMode();
Add Tools to Edit PDF content:
-
Add Text Tool: To add new text, you can switch to a tool called addText. For example:
instance.UI.setActiveTool('addText');
-
Add Image Tool: You can switch to the addImage tool.
instance.UI.setActiveTool('addImage');
What's More
To explore more features and enhancements for your JavaScript PDF projects, be sure to check out our extensive developer guides. These resources offer comprehensive insights to help you maximize the potential of your PDF applications.
Should you encounter any issues during integration or have any questions, our team is here to assist you.