PDF is an important primary medium for blueprints, technical drawings, and design plans in architecture, construction, manufacturing, and measuring. However, the PDF measurement tool is lacking in many web applications, affecting users' efficiency and decision-making.
ComPDF, a leading PDF solution provider, offers measurement tools with clear guides. So developers enable easy integration for precise measurements without extra software or complex setup.
In this blog, we will discuss how to add the PDF measurement feature to your web projects so that you can increase productivity and user experience.
ComPDFKit's PDF Measurement Tools
The latest ComPDFKit Web Demo introduces 2 PDF measurement tools: Line Measurement and Rectangle Measurement. Line Measurement allows users to measure the distance, angle, and X/Y distance of a line. Rectangle Measurement supports measuring the area and perimeter of a rectangle. You can also change its measurement properties and adjust the scale. These features are widely used in industries such as architecture, engineering, manufacturing, and GIS. Shortly, ComPDFKit will add more PDF Measurement tools, such as polygon, curve, polyline, arc, and circle measurement tools, etc. to meet a wider range of application needs. Visit our Web Demo to explore PDF measurement tools, and follow us on YouTube, Facebook, LinkedIn, or Twitter for the latest updates.
How to Integrate PDF Measurement Feature on Web?
At ComPDFKit, no need to develop the extra PDF measurement feature, only integrate our PDF SDK, and you can launch the comprehensive measurement PDF feature right now!
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.
Sure, you can also contact us to get a license key!
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
Fast Integrate PDF Measurement Feature - Video Guide
Final Words
Adding PDF measurement tools to your web app improves accuracy and saves a considerable amount of time for web applications in architecture, engineering, and manufacturing industries. ComPDFKit PDF SDK helps you add distance, perimeter, and area measurement functions with no additional software in no time and complex setup.
In the future, we will make more PDF measurement tools available to offer more powerful and more comprehensive developers' PDF solutions.