I am working on Extracting a Selected Text from PDF in Iframe using PDF.js. In my Javascript Code, Text Selection event is not working " window.addEventListener(‘message’, function (event) {".
Expected behaviour
I am expecting that when I select a Text from a PDF in Iframe, it should be printed into console log.
Code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Text Selection</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js"></script>
</head>
<body>
<iframe id="pdfViewer" src="./Dummy.pdf" width="100%" height="500px"></iframe>
<script>
// Callback function to handle PDF.js initialization
function initPDF(pdfDoc) {
// Get the first page
pdfDoc.getPage(1).then(function (page) {
// Get the iframe element
const pdfIframe = document.getElementById('pdfViewer').contentWindow;
// Add event listeners for text selection to the iframe using postMessage
pdfIframe.postMessage({ type: 'addTextSelectionListeners' }, '*');
});
}
// Wait for the PDF.js library to be ready
document.addEventListener('DOMContentLoaded', () => {
// Initialize PDF.js and load the PDF document
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
pdfjsLib.getDocument('./Dummy.pdf').promise.then(initPDF);
});
</script>
<script>
// Content script injected into the PDF.js viewer iframe
window.addEventListener('message', function (event) {
if (event.source === window.parent && event.data.type === 'addTextSelectionListeners') {
const isTextSelecting = { value: false };
window.addEventListener('mousedown', function () {
isTextSelecting.value = true;
});
window.addEventListener('mousemove', function () {
if (isTextSelecting.value) {
const selection = window.getSelection();
const selectedText = selection.toString().trim();
if (selectedText !== '') {
// Do something with the selected text (e.g., display in console)
console.log('Selected Text:', selectedText);
}
}
});
window.addEventListener('mouseup', function () {
isTextSelecting.value = false;
});
}
});
</script>
</body>
</html>
Any help would be great.
Thank You.