Можно ли как то отследить прогресс просмотра документа pdf с помощью js?

Question

Можно ли как то отследить прогресс просмотра документа pdf с помощью js?

Рейтинг: 1Ответов: 1Опубликовано: 04.05.2023

Необходимо получать процент пролистанных стр документа pdf. У меня есть контейнер, внутри которого iframe с src на сам файл, все открывается с этим проблем нет, но вот с прогрессом не выходит.

Код html, ссылка здесь банально для того, чтобы при клике iframe становился видимым, а при повторном клике скрывался, чтобы закрыть документ:

<a href="#" id="pdf-link">
  <?= $row['title'] ?>
</a>
<div id="pdf-container">
  <iframe id="pdf-iframe" src="<?= $row['file_name'] ?>" width="100%" height="600px"></iframe>
</div>

Код js, тут пытаюсь как раз сохранить проскроленные страницы и отправить всяком, но код останавливается на pdfViewer.pdfViewer.viewer.addEventListener("scroll", function() { с ошибкой caught TypeError: Cannot read properties of undefined (reading 'pdfViewer')

var iframe = document.getElementById("pdf-iframe");
var pdfViewer = iframe.contentWindow.PDFViewerApplication;

var scrollPositions = [];

pdfViewer.pdfViewer.viewer.addEventListener("scroll", function() {
  var scrollPosition = pdfViewer.pdfViewer.scrollPageIntoView({
    pageNumber: pdfViewer.pdfViewer.currentPageNumber,
    destArray: [null, {
      name: "XYZ"
    }, 0, 0],
  });
  if (scrollPositions.indexOf(scrollPosition) === -1) {
    scrollPositions.push(scrollPosition);
  }
});

function saveScrolledPositions() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "vendor/guide-progress.php");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log("Scrolled positions saved successfully");
      } else {
        console.log("Error saving scrolled positions");
      }
    }
  };
  xhr.send("scrolledPositions=" + scrollPositions.length);
}

javascript php pdf.js

Источник: Stack Overflow на русском

Answer 1

▲ 0

Для обмена данными с фреймами, дочерними окнами или дочерними вкладками следует использовать систему обмена сообщениями.

Для отправки используйте функцию postMessage:

childWindow.postMessage(data, href); // дочерней вкладке
childFrame.postMessage(data, href); // фрейму
window.opener.postMessage(data, href); // от дочерней вкладки
window.parent.window.postMessage(data, href); // из фрейма

Для получения сообщений - навесьте слушатель сообщений:

if (window.addEventListener) {
    window.addEventListener("message", tractMessage, false);
} else {
    window.attachEvent("onmessage", tractMessage);
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Можно ли как то отследить прогресс просмотра документа pdf с помощью js?

Ответы