When working with PDF files online, having the ability to measure dimensions and content directly within the browser can significantly enhance productivity.
This guide will walk you through the simple process of building an online PDF measurement tool using ComPDFKit's Web SDK.
Prerequisites
To get started, you'll need to check whether you have met these requirements by visiting our "Web SDK guides" page:
- The latest stable version of Node.js.
- A package manager compatible with npm.
- Apply the License Key
How to Get a 30-day Free License
ComPDFKit offers a 30-day free license key for everyone to test their project. And you can get it with the following steps:
- Visit ComPDFKit's Pricing page
- Then input the required information in the form
- Finally, Click the "Get Your Free Trial License" button and check your email inbox after waiting a moment, the license key will be there.
Integrate Measurement PDF into Web Project - Full Guide
Step 1: Install the ComPDFKit for Web package from npm into your Vanilla JS project
npm i @compdfkit_pdf_sdk/webviewer --save
Then, Add the "webviewer" folder which contains the required static resource files to run the ComPDFKit Web demo, to your project's public resource folder.
cp ./node_modules/@compdfkit_pdf_sdk/webviewer/webviewer.global.js ./
cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./webviewer
Step 2: 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='./webviewer.global.js'></script>
<body>
<div id="app" style="width: 100%; height: 100vh;"></div>
</body>
</html>
Note: 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
Step 3: Add a script tag and initialize ComPDFKitViewer for Web using 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='./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>
Step 4: In order to display on the local host, we need to set up the server environment in this step.
npm install -g http-server
Step 5: Open http://localhost:8080 on your browser. Then the PDF file will be displayed and you can switch to the PDF Measurement tool to measure your PDF file.
http-server -a localhost -p 8080
Top comments (0)