Arhn - архитектура программирования

Css print - разрыв страницы по содержимому

У меня есть веб-страница, которая печатает свое содержимое на предварительно распечатанном шаблоне квитанции. Проблема, с которой я столкнулся, заключается в том, что шаблон имеет три раздела на каждой странице. Раздел заголовка с номером счета, именем клиента и т. д. Раздел содержимого, который заполняется в формате строки таблицы. Этот раздел является динамическим и не может предсказать количество строк и высоту. Нижний колонтитул содержит сумму суммы и т. д.

Я хотел бы сохранить верхний колонтитул только на первой странице, нижний колонтитул только в нижней части последней страницы. Динамическая средняя часть должна разбиваться и распределяться по нескольким страницам в зависимости от содержимого. Верхний и нижний колонтитулы промежуточных страниц должны оставаться пустыми на соответствующем месте.

Может ли кто-нибудь помочь мне создать эту структуру с помощью html5 и css3.

javascript html css printing
07.05.2016

Ответы:


1

Привет, это мое решение

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
@media all {
  .page-break   { display: none; }
}
//make it break the page
@media print {
  .page-break   { display: block; page-break-before: always; }
  #content{
    color:blue;
  }
}
</style>
<header>
  <h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
  <h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
  <h1>FOTTER</h1>
</footer>
</body>
</html>

Надеюсь, это поможет. Для получения дополнительной информации перейдите по ссылке.

09.05.2016
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..