М.Двач / Web-мастера

11 Кб, 268x222
формирование печатного документа из страницы в chrome. Анонимус 25 июня 2022, 22:18 135893 В конец треда | Веб

Допустим, есть вот веб-страничка, по сути являющаяся печатным документом. При просмотре на экране она не делится на страницы, а при печати начинает делиться. И хотелось бы снизу каждой странички и сверху добавить некий заголовок и номер страницы в нем. Можно сделать всё очевидно как, проблема с номером страницы. Есть очевидное решение в css, где @page { @bottom: content: counter(page); }. Оно прекрасно работает даже в доисторическом фаерфоксе. Но оно не работает в самом популярном веб-браузере -- хроме.

Использовать сторонние ресурсы,вроде print.js и т.п. -- нельзя по разным соображениям и работать вообще должно без инета. Как сделать с опорой только на собственные силы? Ну очевидно, после window.load отмерить вертикальный размер, разделить на размер страницы в пикселях -- тут уже трудности, т.к. размеры страниц могут оказаться разные, размеры окантовки (padding/margin) разные... Но примерно угадать можно. И потом налепить элементов с номерами страниц с position:absolute. Всё бы работало знай точные размеры... Наверное можно как-то повесить условно-невидимый элемент с position:fixed на всю страницу и из его размера вычислить число страниц. Если между отрендеренными страницами нет неизвестного промежутка из-за неизвестного padding/marting. И непонятно как его померить.

Подскажите что-нибудь. Т.е. имеем html -> печатаем в pdf -> печатаем на принтер -> можем сложить разрозненные листы в документ.

Волосатая веб-макака 2 26 июня 2022, 23:28 2 135899

А зачем в pdf конвертировать? Может проще сразу на печать отдавать? Притом, печатать необязательно то что видит пользователь. Можно сделать как-то так:

<div id="print-content">
Содержимое для печати
</div>

<script>
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var prtCSS = '<link rel="stylesheet" href="/templates/css/template.css" type="text/css" />';
var WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('<div id="print" class="contentpane">');
WinPrint.document.write(prtCSS);
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</div>');
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
prtContent.innerHTML=strOldOne;
}
</script>

Вот от сюда кусок кода свистнул: https://palpalych.ru/blog/javascript-pechat-html-stranicy

Обновить тред
« /web/В начало тредаВеб-версияНастройки/a//b//mu//s//vg/Все доски

Скачать тред только с превьюс превью и прикрепленными файлами

Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах.Подробнее

Пользуетесь скринридером — пишите, что можно улучшить.
Host-Food.ru — надёжный хостинг от 12 руб/мес | Free DNS
Зеркала М.Двача: m2ch.hk, m2ch.lib, m2chfapiswfw2wcakptqp4o6ltgchvjuxfab7urxlduraomtlnhw5xad.onion