2012-12-26 3 views
7

У меня есть счет в html, который хорошо отображается на экране. Я хочу распечатать его на предварительно отформатированной бумаге. бумага имеет три секцииПечать счета на предварительно отформатированной бумаге с использованием CSS

Заголовок (фиксированная высота от Верх страницы)

тела (таблица состоит из 1 - N строк)

нижнего колонтитула (фиксированная высота от нижней части страницы)

Я попытался с помощью CSS и создания DIV с помощью CSS и #InvFooter

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> 
@page { size:8.5in 11in; margin: 2cm } 


#InvFooter {position:absolute;left:50px;bottom:0px;} 

У меня есть две проблемы, которые я не могу понять.

  1. Как привязать нижний колонтитул к нижней части печатной страницы.
  2. Как ограничить Тело неподвижным участком страницы и переполняться на другую страницу, если в таблице слишком много строк.
+0

Что вы подразумеваете под «предварительно отформатированной бумагой»? Уже напечатана ли физическая бумага? – Jonatan

+1

ДА точно. Цветные элементы фона счета все предварительно напечатаны вместе с перфорацией. –

+1

Ага, я вижу. Я думаю, вам будет трудно с этим справиться с CSS. Я бы посоветовал вам использовать что-то по линии PDF. CSS и HTML действительно лучше подходят как рекомендации о том, как браузер должен отображать ваш документ. Не для печати - извините. – Jonatan

ответ

2

Простой ответ: не следует, html/css никогда не предназначался для печати. Даже если вы можете «взломать» абсолютные размеры в соответствии с вашим текущим принтером, нет гарантии, что они будут соответствовать следующему (или клиенту).

По этой причине был изобретен PDF, чтобы вы хотели, чтобы вы ожидали в печатном виде (а также с высокой переносимостью).

С помощью PDF вы получите фиксированный (бумажный) размер.

Вы сможете найти бесплатные pdf-решения (с открытым исходным кодом), а также коммерческие решения (например, Dynamic PDF - и есть много других), которые позволяют вам создавать PDF-файлы из .Net на лету/динамически от серверных приложений без зависимостей продуктов Adobe.

+0

Спасибо, в этом случае предварительно отпечатанные формы предназначены только для тех случаев, когда мы отправляем счета-фактуры. Если пользователь самостоятельно оплачивает и распечатывает свои собственные счета Форма не печатается, поэтому все работает. Будут ли решения PDF работать программно (то есть я могу сказать им, что DIV –

+0

Да, это программно. И очень просто настроить такие вещи, как счета-фактуры и т. Д. Я использовал его в этом и более сложных вещах, и полученные файлы обычно очень маленькие по размеру если только не вставлять изображения и т. д. – K3N

+0

Да, мой сервер env - это Apache поверх FreeBSD с perl, python, PHP и т. д. Мне нужно решение, которое не является .net –

0

Это лучшая компиляция методов печати CSS, с которыми я столкнулся. Он имеет глубокие ссылки на стандарты W3, отличные примеры, рекомендованное сторонним программным обеспечением HTML -> PDF и удобный JPEG, который визуализирует 16 различных селекторов страниц. Это заставило меня начать, и теперь я могу напечатать более 100 кратких подробных резюме проекта, чтобы познакомиться с исполнительными отзывами.

  1. Статья: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

  2. Удобный денди страница Маржа JPEG: https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg

  3. Демо HTML книга: https://github.com/rachelandrew/css-for-print/blob/master/book.html

  4. Демонстрационная печать CSS: https://github.com/rachelandrew/css-for-print/blob/master/pdf-styles.css

Надеюсь, это поможет!

EDIT Это может быть то, что вы ищете:

.invoice { 
    page-break-before: always; 
} 

.invoice h1.title { 
    page-break-after: avoid; 
} 

.invoice .line-item { 
    page-break-inside: avoid; 
    page-break-after: auto; 
} 

EDIT Как отформатированный документ размещения многостраничные счета? Вам необходимо распечатать каждый счет-фактуру отдельно ... ugh

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