This PDF.js Express 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'. View demo
WebViewer({
path: '/static/WebViewer/lib/',
initialDoc: '../../../samples/files/demo.pdf',
enableMeasurement: true,
}, document.getElementById('viewer'))
.then((instance) => {
instance.setHeaderItems((header) => {
header.delete('textToolGroupButton');
header.delete('freeHandToolGroupButton');
header.delete('shapeToolGroupButton');
header.delete('signatureToolButton');
header.delete('freeTextToolButton');
header.delete('stickyToolButton');
header.delete('miscToolGroupButton');
});
instance.openElements(['notesPanel']);
document.getElementById('select').onchange = (e) => {
instance.loadDocument(e.target.value);
};
document.getElementById('file-picker').onchange = (e) => {
const file = e.target.files[0];
if (file) {
instance.loadDocument(file);
}
};
document.getElementById('url-form').onsubmit = (e) => {
e.preventDefault();
instance.loadDocument(document.getElementById('url').value);
};
});
WebViewer({
path: '/static/WebViewer/lib/',
initialDoc: '../../../samples/files/demo.pdf',
enableMeasurement: true,
}, document.getElementById('viewer'))
.then((instance) => {
instance.UI.setHeaderItems((header) => {
header.delete('textToolGroupButton');
header.delete('freeHandToolGroupButton');
header.delete('shapeToolGroupButton');
header.delete('signatureToolButton');
header.delete('freeTextToolButton');
header.delete('stickyToolButton');
header.delete('miscToolGroupButton');
});
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);
};
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../style.css">
<script src="/static/WebViewer/lib/webviewer.min.js"></script>
<script src='../../old-browser-checker.js'></script>
</head>
<body>
<header>
<div className="title sample">Measurement sample</div>
</header>
<aside>
<h1>Controls</h1>
<h2>Choose a file to view</h2>
<select id="select" style={{"width":"100%"}}>
<option value="../../../samples/files/demo.pdf">../../../samples/files/demo.pdf</option>
</select>
<h2>Or pass a url to a document</h2>
<form id="url-form">
<input id="url" type="text" style={{"width":"100%"}} />
<input type="submit" value="Submit">
</form>
<h2>Or choose your own</h2>
<input id="file-picker" type="file" accept=".pdf,.jpg,.jpeg,.png,.docx,.xlsx,.pptx,.md" />
<hr />
<h1>Instructions</h1>
<p>Select the measurement tool from toolbar and create annotations that measure distance, perimeter and area.</p>
<p>Click on the measurement tool button to open the overlay in which you can change the scale and the precision.</p>
<p>View the distance, perimeter and area in the opened left panel.</p>
</aside>
<div id="viewer"></div>
<script src="../../menu-button.js"></script>
<script src="measurement-viewer.js"></script>
</body>
</html>
