Подготовка html к печати

@resource2008 · Регистрация: 11.03.2011

Студворк — интернет-сервис помощи студентам

Собственно, проблема избитая - печать страниц на стороне клиента.

Задача отпечатать некий html контент с колонтитулами, в которых должна быть всунута дата, копирайты и бог знает что еще.

Сразу оговорюсь, что размер контента 5-10 страниц А4.
Печатать через промежуточные документы (например сгенерировать pdf) - не вариант, заказчика он не устраивает.
Остается заранее разбить html страницу (с помощью page-break-after в CSS, например) на участки определенного размера, которые впишуться в страничку формата А4 и добавить к ним "колонтитутлы".

Затея это мерзопакостная.

у какого какие есть идеи по дроблению html документа на страницы?
если кто-то сталкивался с похожими задачами - как решали?

@your_tremor · 31.10.2013, 19:32

при вводе документа обычно об этом думают. а так, средняя цена $50+($0.01 за страницу). Алгоритм уж больно непростой, ибо получить параметры принтера, размер страницы, расчитать размер печатной области узнать размеры всех шрифтов и картинок достоверно -нереально. На настольных приложениях это делают. Сохраняйте в pdf..

@Padimanskas · 31.10.2013, 23:40

Сообщение от resource2008

Задача отпечатать некий html контент с колонтитулами, в которых должна быть всунута дата, копирайты и бог знает что еще.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
 
<head>
    <meta charset=utf-8 />
    <title>Print&nbsp;page</title>
    <style>
        @media screen {
            div.divFooter, div.divHeader {
                display: none;
            }
        }
        @media print {
            div.divHeader {
                position: fixed;
                top: 0;
            }
            div.divFooter {
                position: fixed;
                bottom: 0;
                margin: auto;
            }
        }
    </style>
</head>
 
<body>
    <div class="divHeader"> Header: дата, копирайты и бог знает что еще</div>
    <div class="divFooter"> Footer: дата, копирайты и бог знает что еще</div>
</body>
 
<button onclick="window.print()">Печать</button>
 
</html>

@resource2008 · 01.11.2013, 05:12 **[ТС]**

Сообщение от your_tremor

при вводе документа обычно об этом думают. а так, средняя цена $50+($0.01 за страницу). Алгоритм уж больно непростой, ибо получить параметры принтера, размер страницы, расчитать размер печатной области узнать размеры всех шрифтов и картинок достоверно -нереально. На настольных приложениях это делают. Сохраняйте в pdf..

вся соль в том, что содержимое динамическое и вводить его будут ~~криворукие~~ рядовые пользователи.
получить параметры принтера и т.д. из браузера в принципе можно, но тут тоже много нюансов.
pdf - это первое что я предложил и что мне зарпетили делать

вообще меня немного возмущает, что за много лет так для печати и не добавили никакой малины.

Добавлено через 2 минуты

Сообщение от Padimanskas

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
 
<head>
    <meta charset=utf-8 />
    <title>Print&nbsp;page</title>
    <style>
        @media screen {
            div.divFooter, div.divHeader {
                display: none;
            }
        }
        @media print {
            div.divHeader {
                position: fixed;
                top: 0;
            }
            div.divFooter {
                position: fixed;
                bottom: 0;
                margin: auto;
            }
        }
    </style>
</head>
 
<body>
    <div class="divHeader"> Header: дата, копирайты и бог знает что еще</div>
    <div class="divFooter"> Footer: дата, копирайты и бог знает что еще</div>
</body>
 
<button onclick="window.print()">Печать</button>
 
</html>

а в каких браузерах это работает?
в смысле страниц много, и в хроме и ие10 футер появляется только внизу последней страницы, а требуют на каждой.

@Padimanskas · 01.11.2013, 13:53

Если вы хотите найти какое-нибудь решение, а не очередной вопрос, то должны на время забыть русский язык.
При первом же запросе, вроде "css print colontitle in every page" Google изрыгнул столько материала, что глаза разбегаются.

@resource2008 · 01.11.2013, 14:46 **[ТС]**

Сообщение от Padimanskas

Если вы хотите найти какое-нибудь решение, а не очередной вопрос, то должны на время забыть русский язык.
При первом же запросе, вроде "css print colontitle in every page" Google изрыгнул столько материала, что глаза разбегаются.

а вы их читали? там такие же советы с position: fixed; и pdf

в любом случае спасибо

@your_tremor · 01.11.2013, 20:25

Сообщение от Padimanskas

css print colontitle in every page

как я понял задача стоит разбить на страницы, а не прилипить колонтитулы к существующим страницам

@Padimanskas · 01.11.2013, 22:24

Сообщение от your_tremor

как я понял задача стоит разбить на страницы, а не прилипить колонтитулы к существующим страницам

Можно и на страницы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
 
<head>
    <meta charset=utf-8 />
    <title>Print&nbsp;page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #FAFAFA;
            font: 12pt "Tahoma";
        }
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .page {
            width: 21cm;
            min-height: 29.7cm;
            padding: 2cm;
            margin: 1cm auto;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .subpage {
            padding: 1cm;
            border: 5px red solid;
            height: 237mm;
            outline: 2cm #FFEAEA solid;
        }
        
        @page {
            size: A4;
            margin: 0;
        }
        @media print {
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }
    </style>
</head>
 
<body>
    <button onclick="window.print()" style="position:absolute;">Печать</button>
    <div class="book">
        <div class="page">
            <div class="subpage">Page 1/2</div>
        </div>
        <div class="page">
            <div class="subpage">Page 2/2</div>
        </div>
    </div>
</body>
 
</html>

@resource2008 · 02.11.2013, 01:27 **[ТС]**

спасибо, по такому пути и иду

Добавлено через 37 минут

Сообщение от your_tremor

как я понял задача стоит разбить на страницы, а не прилипить колонтитулы к существующим страницам

первоначальная задача колонтитулы, но они ведь должны отображаться на каждой печатной странице.
и средствами web-а вариант только вручную быть на "страницы" и тулить к каждой такой "странице" шапку с подвалом.

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@resource2008 111 / 112 / 18 Регистрация: 11.03.2011 Сообщений: 421

	Подготовка html к печати 31.10.2013, 19:09. Показов 6385. Ответов 8 Метки нет (Все метки) Собственно, проблема избитая - печать страниц на стороне клиента. Задача отпечатать некий html контент с колонтитулами, в которых должна быть всунута дата, копирайты и бог знает что еще. Сразу оговорюсь, что размер контента 5-10 страниц А4. Печатать через промежуточные документы (например сгенерировать pdf) - не вариант, заказчика он не устраивает. Остается заранее разбить html страницу (с помощью page-break-after в CSS, например) на участки определенного размера, которые впишуться в страничку формата А4 и добавить к ним "колонтитутлы". Затея это мерзопакостная. у какого какие есть идеи по дроблению html документа на страницы? если кто-то сталкивался с похожими задачами - как решали? 0

@your_tremor ищите меня в нирване 36 / 36 / 5 Регистрация: 23.10.2013 Сообщений: 198
	31.10.2013, 19:32
	при вводе документа обычно об этом думают. а так, средняя цена $50+($0.01 за страницу). Алгоритм уж больно непростой, ибо получить параметры принтера, размер страницы, расчитать размер печатной области узнать размеры всех шрифтов и картинок достоверно -нереально. На настольных приложениях это делают. Сохраняйте в pdf.. 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	01.11.2013, 13:53
	Если вы хотите найти какое-нибудь решение, а не очередной вопрос, то должны на время забыть русский язык. При первом же запросе, вроде "css print colontitle in every page" Google изрыгнул столько материала, что глаза разбегаются. 0