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!
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
<!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 8080Open 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
-
Full documentation for ComPDFKit for Web can be found here.
-
For detailed information, please visit our Guides page.
-
Stay updated with the latest improvements through our Changelog.
-
For technical assistance, please reach out to our Technical Support.
-
To get more details and an accurate quote, please contact our Sales Team.