Some test text!

Loading...
Guides

Measure area distance & perimeter in PDF with JavaScript

This JavaScript sample lets you calculate area dimensions, measure between lines or trace perimeters in PDFs. The scale of measurement can be customized based on requirements and calculations are displayed as a comment annotation. This functionality is commonly used in construction software to measure the amount of material required during 'Take-off'. This sample works on all browsers (including IE11) and mobile devices without using plug-ins. To see an example visit Measurement tools demo. Learn more about our JavaScript PDF Library.

Get Started Samples Download

To run this sample, get started with a free trial of PDFTron SDK.

JavaScript

HTML

WebViewer(
  {
    fullAPI: true, // Only required if using snapping feature
    path: '../../../lib',
    initialDoc: '../../../samples/files/houseplan-A.pdf',
    enableMeasurement: true,
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  instance.UI.setToolbarGroup('toolbarGroup-Measure');

  // If you would like to have snapping features enabled, you could do so with the following:
  // const { documentViewer, Tools } = instance.Core;
  // const distanceMeasurementTool = documentViewer.getTool(Tools.ToolNames.DISTANCE_MEASUREMENT);
  // distanceMeasurementTool.setSnapMode(Tools.SnapModes.DEFAULT);

  // open notes panel by default
  instance.UI.openElements(['notesPanel']);

  document.getElementById('select').onchange = e => {
    instance.UI.loadDocument(e.target.value);
  };

  document.getElementById('file-picker').onchange = e => {
    const file = e.target.files[0];
    if (file) {
      instance.UI.loadDocument(file);
    }
  };

  document.getElementById('url-form').onsubmit = e => {
    e.preventDefault();
    instance.UI.loadDocument(document.getElementById('url').value);
  };
});

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use