2012-03-15 2 views
3

Это моя текущая проблема.Формат HTML-документа в несколько разделов формата А4

Я хочу сгенерировать HTML-страницу, содержащую около 40 купонов. Каждый купон должен быть с одним размером A4.

Итак, если бы я должен был распечатать документ HTML, я бы хотел, чтобы каждая печатная страница содержала 1 купон.

Идеи о том, как я мог это сделать?

+1

Вы пытались использовать divs с классом * a4 * с css 'div.a4 {width: 210mm; высота: 297мм; } '? –

+0

размер помог для моей проблемы. –

ответ

4

Следующий CSS должен добиться того, что вам нужно, subistitute имени класса для любого подходят для вашей структуры DOM

@media print { 
    .coupon-class 
    { 
    page-break-after:always; 
    } 
} 

Это всегда будет вставить разрыв страницы после элемента можно также использовать page-break-before для достижения перерыв страницы перед элементом.

+0

Это было именно то, что мне нужно для этой проблемы. –

2

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

Вам было бы лучше создать PDF-код ваших купонов, который вы можете легко сделать с расширениями PHP.

+0

+1 PDF - это путь сюда. –

+1

+1 Рендеринг HTML при печати безумно противоречив. –

+0

Это неверно, CSS2 + включил свойства страницы-break-before/after, которые достаточно хорошо поддерживаются, в сочетании с запросом на печать для печати вы можете фактически добиться довольно надежного стиля печати, единственный бит, который вы не можете использовать, - это границы печати пользователей, но если все, что вам нужно, является гарантией разрывов страниц, тогда это легко достижимо с помощью CSS. –

0

Вы можете сделать шаги ниже:

  1. Определение width:100 для каждого купона в своих стилей CSS. Это будет использовать максимальную ширину вашей бумаги.
  2. Используйте page-break-after:always в свойствах css каждого купона. Это заставит следующий купон отобразиться на следующей странице. (http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx)

Не забудьте внимательно следить за высотой купонов. Старайтесь не помещать в них много строк.
Вы можете использовать тег <fieldset> для каждого купона и применить к нему свойства css.

+0

Вы имели в виду 'ширина: 100%;'? – AlicanC

Смежные вопросы