Change the color and opacity of PDF Form Fields using this PDF.js Express sample (no servers or other external dependencies required). This is commonly used to highlight required fields in a form (signature fields) or to make important fields easier to find on a page. View demo
WebViewer({
path: '/static/WebViewer/lib/',
pdftronServer: 'https://demo.pdftron.com/', // comment this out to do client-side only
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/form1.pdf',
}, document.getElementById('viewer'))
.then((instance) => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.on('documentLoaded', () => {
const pageCount = docViewer.getPageCount();
const defaultStyles = Annotations.WidgetAnnotation.getCustomStyles;
const customStyles = (widget) => {
if (widget instanceof Annotations.TextWidgetAnnotation) {
if (widget.fieldName === 'f1-1') {
return {
'background-color': 'lightgreen',
};
}
return {
'background-color': 'lightblue',
color: 'brown',
};
} if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
return {
'background-color': 'red',
color: 'white',
};
}
};
document.getElementById('form').onchange = (e) => {
if (e.target.id === 'custom') {
// Change styles for widget annotations
Annotations.WidgetAnnotation.getCustomStyles = customStyles;
} else {
Annotations.WidgetAnnotation.getCustomStyles = defaultStyles;
}
for (let i = 0; i < pageCount; i++) {
// Redraw canvas
annotManager.drawAnnotations(i + 1, null, true);
}
};
});
});
WebViewer({
path: '/static/WebViewer/lib/',
pdftronServer: 'https://demo.pdftron.com/', // comment this out to do client-side only
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/form1.pdf',
}, document.getElementById('viewer'))
.then((instance) => {
const {
documentViewer,
annotationManager,
Annotations
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const pageCount = documentViewer.getPageCount();
const defaultStyles = Annotations.WidgetAnnotation.getCustomStyles;
const customStyles = (widget) => {
if (widget instanceof Annotations.TextWidgetAnnotation) {
if (widget.fieldName === 'f1-1') {
return {
'background-color': 'lightgreen',
};
}
return {
'background-color': 'lightblue',
color: 'brown',
};
} if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
return {
'background-color': 'red',
color: 'white',
};
}
};
document.getElementById('form').onchange = (e) => {
if (e.target.id === 'custom') {
// Change styles for widget annotations
Annotations.WidgetAnnotation.getCustomStyles = customStyles;
} else {
Annotations.WidgetAnnotation.getCustomStyles = defaultStyles;
}
for (let i = 0; i < pageCount; i++) {
// Redraw canvas
annotationManager.drawAnnotations(i + 1, null, true);
}
};
});
});
<!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">Form fields customization sample</div>
</header>
<aside>
<h1>Controls</h1>
<h2>Form field styles</h2>
<form id='form'>
<input type='radio' name='form' id='default' checked />
<label for='default'>Default</label>
<br />
<input type='radio' name='form' id='custom' />
<label for='custom'>Custom</label>
</form>
<hr />
<h1>Instructions</h1>
<p>Use the buttons to change form field styles.</p>
</aside>
<div id='viewer'></div>
<script src="../../menu-button.js"></script>
<script src='form-fields.js'></script>
</body>
</html>
