window.onload = function () {
//DsPdfViewer.LicenseKey = "***key***";
// 注：このコードではjqueryを使用しています。（index.htmlを参照）
// また、スタイルを追加しています。（styles.cssを参照).
var viewer = new DsPdfViewer('#viewer', {
restoreViewStateOnLoad: false,
language: "ja"
});
viewer.addDefaultPanels();
var pdf = "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/diodocs_a4_full.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 = () => {
// ポップアップを閉じる
$(".jquery-popup").remove();
// ハイライト表示を閉じる
const textSelectionRect = document.querySelector(".highlighted-text-rectangle");
if (textSelectionRect) textSelectionRect.remove();
};
const showPopupForTextSelection = (selectedText, outerRect, lastPartRect) => {
// ポップアップを表示
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("選択された文字列： <br/><b>" + selectedText + "</b>")
.appendTo("body");
// ハイライト表示
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="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>テキスト選択時にポップアップ表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/diodocs/pdfviewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/diodocs/pdfviewer/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;
}
