Posted onMar 17

Build Online Tools to Measure PDFs

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 ofbuilding 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:

VisitComPDFKit'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></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></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: Openhttp://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.