Some test text!

Web

Guides

Downloads

FAQ

API

Changelog

Demo

Samples

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