Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Derek
Derek

Posted on

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.

Image description

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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.

http-server -a localhost -p 8080
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

PDF software engineer. .NET, Java, C#, Python.
  • Joined

More fromDerek

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp