window.onload = function() {
const viewer = new DsPdfViewer("#viewer", getViewerOptions());
configureViewerUI(viewer);
viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/sign-pdf-in-order.pdf");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sign PDF in order</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script>
<script src="./src/app.js"></script>
<script src="./src/config.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
#viewer {
height: 100%;
}
// exported global methods:
var getViewerOptions, configureViewerUI;
(function () {
// Graphical signature locations.
// Note that the { x, y } origin is at the bottom left.
var graphicalSignatureLocationsBottomLeft = {
// The key is the name of the PDF file in lower case without extension.
"sign-pdf-in-order": [
{ pageIndex: 0, x: 187, y: 73, w: 80, h: 20, title: "Buyer" },
{ pageIndex: 0, x: 420, y: 73, w: 80, h: 20, title: "Seller", color: "#1234dd" },
{ pageIndex: 1, x: 187, y: 73, w: 80, h: 20, title: "Buyer" },
{ pageIndex: 1, x: 420, y: 73, w: 80, h: 20, title: "Seller", color: "#1234dd" },
{ pageIndex: 2, x: 187, y: 73, w: 80, h: 20, title: "Buyer" },
{ pageIndex: 2, x: 420, y: 73, w: 80, h: 20, title: "Seller", color: "#1234dd" },
{ pageIndex: 3, x: 187, y: 73, w: 80, h: 20, title: "Buyer" },
{ pageIndex: 3, x: 420, y: 73, w: 80, h: 20, title: "Seller", color: "#1234dd" },
{ pageIndex: 4, x: 187, y: 73, w: 80, h: 20, title: "Buyer" },
{ pageIndex: 4, x: 420, y: 73, w: 80, h: 20, title: "Seller", color: "#1234dd" },
{ pageIndex: 5, x: 187, y: 73, w: 80, h: 20, title: "Buyer" },
{ pageIndex: 5, x: 420, y: 73, w: 80, h: 20, title: "Seller", color: "#1234dd" }
]
};
// Parameters for the "sign date" labels
const signDateLabelParams = {
// x offset from the position of the graphical signature
offset_x: 101,
// y offset from the position of the graphical signature
offset_y: 0,
// label width
w: 58,
// label height
h: 14
}
getViewerOptions = function getViewerOptions() {
return {
supportApi: {
apiUrl: window.top.SUPPORTAPI_URL, // e.g. "http://localhost:5004/api/pdf-viewer";
token: window.top.SUPPORTAPI_TOKEN, // e.g. "support-api-demo-net-core-token";
webSocketUrl: false
},
restoreViewStateOnLoad: false
};
}
configureViewerUI = function (viewer) {
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.onAfterOpen.register(function () {
populateSignature(viewer);
});
}
async function populateSignature(viewer) {
viewer.__onSignatureLinkEvent = onSignatureLinkEvent;
const locationsBottomLeft = graphicalSignatureLocationsBottomLeft[viewer.fileName.toLowerCase().replace(".pdf", "")];
if (locationsBottomLeft) {
for (let i = 0; i < locationsBottomLeft.length; i++) {
const locationInfo = locationsBottomLeft[i];
const pageIndex = parseInt(locationInfo.pageIndex);
const signTitle = locationInfo.title;
const rect = [locationInfo.x, locationInfo.y, locationInfo.x + locationInfo.w, locationInfo.y + locationInfo.h];
const signUiId = "signui_" + i;
const freeTextLabel = {
annotationType: 3, // AnnotationTypeCode.FREETEXT
subject: signUiId,
borderStyle: { width: 1, style: 2 },
fontSize: 6,
appearanceColor: "#fff59d",
color: locationInfo.color || "#f44336",
contents: "Sign Here",
textAlignment: 1,
rect: [rect[0], rect[3] - 12, rect[0] + 35, rect[3]]
};
await viewer.addAnnotation(pageIndex, freeTextLabel, { skipPageRefresh: true });
const viewerSelector = "#" + viewer.hostElement.id;
const linkAnnotation = {
annotationType: 2, // AnnotationTypeCode.LINK
subject: signUiId,
linkType: "js",
borderStyle: { width: 0, style: 5 },
color: "#2196f3",
jsAction: `if(app.viewerType == 'DsPdfViewer') {
var viewer = DsPdfViewer.findControl("${viewerSelector}");
viewer.__onSignatureLinkEvent(viewer, ${pageIndex}, "${signTitle}", "${signUiId}", ${rect[0]}, ${rect[1]}, ${(rect[2] - rect[0])}, ${(rect[3] - rect[1])});
}`,
rect: rect,
title: signTitle
};
await viewer.addAnnotation(pageIndex, linkAnnotation, { skipPageRefresh: true });
}
viewer.repaint();
}
}
function onSignatureLinkEvent(viewer, pageIndex, signTitle, signId, x, y, w, h) {
viewer.showSignTool({
subject: "AddGraphicalSignature", tabs: ["Type", "Draw"],
dialogLocation: "center",
pageIndex: pageIndex,
title: signTitle,
location: { x: x, y: y },
canvasSize: { width: w * 5, height: h * 5 },
destinationScale: 1 / 5,
convertToContent: true,
afterAdd: function (result) {
// remove current Sign UI and scroll to next one:
removeSignature(viewer, signId).then(function () {
viewer.addAnnotation(pageIndex, {
annotationType: 3, borderStyle: { width: 0 },
fontSize: 10, contents: new Date().toLocaleDateString("en-US"),
rect: [x + signDateLabelParams.offset_x, y + signDateLabelParams.offset_y, x + signDateLabelParams.offset_x + signDateLabelParams.w, y + signDateLabelParams.offset_y + signDateLabelParams.h],
convertToContent: true
},
{ skipPageRefresh: false }).then(function () {
scrollToNextSignature(viewer, signTitle);
});
});
}
});
}
async function removeSignature(viewer, signId) {
const annotations = await viewer.findAnnotations(signId, { findField: "subject", findAll: true });
for (let data of annotations) {
await viewer.removeAnnotation(data.pageIndex, data.annotation.id);
}
};
async function scrollToNextSignature(viewer, signTitle) {
const linkAnnotations = await viewer.findAnnotations(2, { findField: "annotationType", findAll: true });
const data = linkAnnotations.find((el) => el.annotation.title === signTitle) || linkAnnotations[0];
if(data) {
viewer.scrollAnnotationIntoView(data.pageIndex, data.annotation, "smooth");
} else {
alert("The document is fully signed.");
}
}
})();
