Как надежно распечатать «Страницу X из Y», используя встроенный браузер (Chrome и Firefox)? ⇐ Javascript

[Anonymous]

Я пытаюсь отобразить нумерацию страниц в просмотре для печати как:
Страница 1 из 10
Страница 2 из 10
Требования

• Работает в печати через собственный браузер
• Последовательное поведение в Chrome / Edge (Chromium) и Firefox
• Нет генерации PDF-файлов на стороне сервера
• Предпочитайте нативное решение (CSS/JS) тяжелым библиотекам

Попытка 1 — мультимедиа, выгружаемое CSS (

Код: Выделить всё

@page

поля полей)

Код: Выделить всё

@media print {
@page {
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
}

Ожидается
Если в документе 5 страниц:

Страница 1 из 5
Страница 2 из 5
Фактическое
BrowserResultChrome / Edgecounter(pages) всегда возвращает 1 → Страница 3 из 1 Firefox Работает правильно → Страница 3 из 5
Проблема: Chromium не поддерживает счетчик(страниц).

Попытка 2 – исправлен нижний колонтитул со счетчиками CSS

Код: Выделить всё

Код: Выделить всё

Код: Выделить всё

Код: Выделить всё

@media print {

Код: Выделить всё

  .page_footer {

Код: Выделить всё

    position: fixed;

Код: Выделить всё

    bottom: 10pt;

Код: Выделить всё

    right: 25pt;

Код: Выделить всё

  }

Код: Выделить всё

  .page_number::after {

Код: Выделить всё

    content: "Page " counter(page);

Код: Выделить всё

  }

Код: Выделить всё

}

Результат
Номер текущей страницы иногда работает
Невозможно получить общее количество страниц (Y)
Несовместимо между Chrome и Firefox
Попытка 3 – ручное увеличение счетчика CSS

Код: Выделить всё

@media print {

Код: Выделить всё

  body {

Код: Выделить всё

    counter-reset: page;

Код: Выделить всё

  }

Код: Выделить всё

  .page_footer {

Код: Выделить всё

    counter-increment: page;

Код: Выделить всё

  }

Код: Выделить всё

  .page_number::after {

Код: Выделить всё

    content: "Page " counter(page);

Код: Выделить всё

  }

Код: Выделить всё

}

Результат
Номера страниц повторяются или пропускаются
Счетчики CSS считают элементы, а не печатные страницы
Ненадежно
Попытка 4 — JavaScript перед печатью

Код: Выделить всё

window.onbeforeprint = () => {

Код: Выделить всё

  const totalPages = Math.ceil(

Код: Выделить всё

    document.body.scrollHeight / window.innerHeight

Код: Выделить всё

  );

Код: Выделить всё

  document.querySelector(".page_number").textContent =

Код: Выделить всё

    `Page 1 of ${totalPages}`;

Код: Выделить всё

};

Результат
JS вычисляет 6 страниц
Предварительный просмотр показывает 9 страниц
Разбивка на страницы браузера ≠ Высота DOM
Неправильные числа
Попытка 5 — Paged.js
Paged.js работает правильно в Chrome, но:
Требуются дополнительные CSS-хаки для Firefox.
Добавляет сложности.
Не совсем встроенная печать браузера.
Вопрос.
Существует ли какой-нибудь собственный способ надежного отображения:
страницы X из Y
при печати браузера, который стабильно работает как в Chrome, так и в Firefox?
Или правильный вывод:
Firefox — единственный браузер с полной поддержкой CSS Paged Media.
Браузеры Chromium не могут изначально поддерживать страницы X из Y.
Библиотека типа Paged.js или создание PDF-файлов на стороне сервера — единственный надежный вариант?
Среда
Chrome 120+
Firefox 121+
Windows / macOS
Печать в браузере (Ctrl + P)
Что мне нужно
Подтверждение ограничений браузера или
Проверенное решение для разных браузеров
Официальные спецификации/ошибки браузера приветствуются

Подробнее здесь: https://stackoverflow.com/questions/798 ... me-firefox