window.onload = function () {
//DsPdfViewer.LicenseKey = "***key***";
// Note: this code uses jquery (see index.html),
// and additional styles (see styles.css).
var viewer = new DsPdfViewer('#viewer', { restoreViewStateOnLoad: false });
viewer.addDefaultPanels();
var pdf = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf";
viewer.open(pdf);
const convertPdfCoordinatesToClient = (pageIndex, rect) => {
const { x, y } = viewer.getPageLocation(pageIndex);
const { scale, viewBox } = viewer.getViewPort(pageIndex);
const x1 = rect[0] * scale + x;
const y1 = (viewBox[3] - rect[3]) * scale + y;
const x2 = rect[2] * scale + x;
const y2 = (viewBox[3] - rect[1]) * scale + y;
return [x1, y1, x2, y2];
};
const hidePopupForTextSelection = () => {
// Hide popup:
$(".jquery-popup").remove();
// Hide highlighted-text-rectangle:
const textSelectionRect = document.querySelector(".highlighted-text-rectangle");
if (textSelectionRect) textSelectionRect.remove();
};
const showPopupForTextSelection = (selectedText, outerRect, lastPartRect) => {
// Show popup:
const [lp_x1, lp_y1, lp_x2, lp_y2] = lastPartRect;
const $div = $("<div>").addClass("jquery-popup")
.css({
left: `${lp_x2 + 4}px`,
top: `${lp_y1 + 4}px`,
width: '200px'
})
.html("Your popup content goes here. Selected text: <b>" + selectedText + "</b>")
.appendTo("body");
// Show highlighted-text-rectangle:
const [x1, y1, x2, y2] = outerRect;
const textSelectionRect = document.createElement('div');
textSelectionRect.className = "highlighted-text-rectangle";
textSelectionRect.style.cssText = `left: ${x1}px; top: ${y1}px; width: ${x2 - x1}px; height: ${y2 - y1}px;`;
document.body.appendChild(textSelectionRect);
}
const onPointerDown = () => {
hidePopupForTextSelection();
};
const onPointerUp = () => {
hidePopupForTextSelection();
const selectedText = viewer.getSelectedText();
const selectedTextCoordinates = viewer.getSelectedTextCoordinates();
if (selectedText && selectedTextCoordinates) {
// console.log(selectedText, selectedTextCoordinates);
const { pageIndex, outerRect, quadPoints } = selectedTextCoordinates;
const lastPartQuadPoints = quadPoints[quadPoints.length - 1];
const lastPartRect = [lastPartQuadPoints[0].x, lastPartQuadPoints[0].y, lastPartQuadPoints[3].x, lastPartQuadPoints[3].y];
showPopupForTextSelection(selectedText, convertPdfCoordinatesToClient(pageIndex, outerRect), convertPdfCoordinatesToClient(pageIndex, lastPartRect));
}
};
viewer.scrollView.addEventListener("pointerdown", onPointerDown);
viewer.scrollView.addEventListener("pointerup", () => setTimeout(onPointerUp));
viewer.scrollView.addEventListener("scroll", onPointerUp);
window.addEventListener("resize", () => setTimeout(onPointerUp));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Popup with Selection</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="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
#viewer {
height: 100%;
}
.jquery-popup {
position: absolute;
border: 1px solid gray;
padding: 10px;
background-color: #fefada;
}
.highlighted-text-rectangle {
position: absolute;
border: 2px solid red;
box-sizing: border-box;
}
body {
overflow: hidden;
}
