Some test text!

Guides
FAQ
API
Samples
Changelog
Download
Demo

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(
  {
    path: '../../../lib',
    initialDoc: '../../../samples/files/houseplan-A.pdf',
    enableMeasurement: true,
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  instance.UI.setToolbarGroup('toolbarGroup-Measure');

  // 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);
  };
});