HTML-печать с абсолютными постингами

Ответ 1

К сожалению, CSS3 Module: Paged Media позволяет все это произойти. Это правила относительно слишком больших страниц:

3.3.3. Отображение полей страницы, которые не соответствуют листам страниц

Если окно страницы не соответствует размерам страницы целевой страницы, пользовательский агент МОЖЕТ выбрать (в порядке предпочтения):

• Отобразите окно страницы с указанным размером на более крупном листе страницы.
• Поверните окно страницы 90 °, если это сделает окно страницы подходящим для листа страницы.
• Масштабируйте окно страницы, чтобы оно соответствовало листу страницы. (Нет необходимости поддерживать соотношение сторон страницы или любых элементов на странице при масштабировании, однако предпочтительным является сохранение формата изображения.) [Сделано в Chrome]
• Переформатировать содержимое страницы, включая "пролитие" на другие листы страниц. [сделанные многими другими или более старыми браузерами]
• Переполнение содержимого клипа (наименее предпочтительное).

Пользовательский агент должен проконсультироваться с пользователем перед выполнением этих операций.

3.3.4. Размещение окна страницы на листе

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

И это правило, которое разбивает все ваши материалы position ed:

3,7. Содержимое вне поля страницы

[...] Кроме того, когда коробки расположены абсолютно, они МОГУТ В конечном итоге в "неудобных" местах. Например, изображения МОГУТ быть размещены на край окна страницы. Аналогичным образом, когда ящики используют фиксированные или относительные позиционирование, они МОГУТ также оказаться вне поля страницы.

Спецификация для точного форматирования таких элементов лежит вне объем этого документа. Однако мы рекомендуем, чтобы авторы и пользовательские агенты соблюдают следующие общие принципы, касающиеся Содержимое вне поля страницы:

• Пользовательским агентам СЛЕДУЕТ избегать создания большого количества пустых ящиков для проверки позиционирования элементов (например, вы не хотите печать 100 пустых страниц). Обратите внимание, однако, что генерирование небольшого числа пустых ящиков страниц МОЖЕТ быть необходимо, чтобы почтить "левый" и "правый" значения для 'page-break-before' и 'page-break-after'.
• Авторы НЕ ДОЛЖНЫ позиционировать элементы в неудобных местах, чтобы избежать их рендеринга. Вместо:
  • Чтобы полностью отключить генерацию ящиков, установите для свойства "display" значение "none".
  • Чтобы сделать поле невидимым, установите свойство видимости.
• Пользовательские агенты МОГУТ обращаться к ящикам, расположенным за пределами окна страницы, несколькими способами, включая отбрасывание их или создание полей страницы для их в конце документа.

Взгляните на второй абзац раздела 3.7: Спецификация для точного форматирования таких элементов выходит за рамки настоящего документа. Поскольку нет другого документа и никакого другого руководства, то общий принцип, следующий за этим пунктом, каждый браузер может делать все, что он хочет.

Это один из недостатков, которые в настоящее время находятся в этом модуле CSS3. Тем не менее, я думаю, что эти недостатки не могут быть удалены с помощью CSS4 или пересмотренного модуля CSS3, поскольку разнообразие возможных таблиц стилей и результирующих макетов слишком велико. Также обратите внимание на небольшую сноску указанную в CSS Print Profile:

‡ Принтер МОЖЕТ игнорировать расположенные элементы, расположенные на странице, до положения текущего элемента в нормальном потоке.

Таким образом, в каждом браузере практически невозможно создать такой же эффект. В настоящее время единственным возможным способом создания переносимого документа является создание PDF файла с сторонним приложением или с помощью принтера PDF и самого любимого браузера. Каждый другой способ обречен на неудачу, если рекомендации W3C не являются строгими или поставщики браузеров реализуют все, что захотят.

См. также:

• Модуль CSS3: Paged Media (Рабочий проект, последняя редакция 2006)
• Профиль печати CSS (Рабочий проект, последняя редакция 2006)

Дополнительные примечания

Если у вас есть группа элементов position:absolute, которые нужно распечатать, иногда возникает вопрос, действительно ли элемент должен быть абсолютным, или же тот же эффект может быть достигнут немного другим или более простым способом. Также обратите внимание, что вы должны использовать display:none для каждого элемента, который действительно не нужен для печатных носителей, таких как объявления, навигационные файлы и т.д.

Ответ 2

Как вы говорите, веб-браузеры, как правило, делают сумасшедшие вещи при печати. Двигатели с ориентацией на печать часто лучше.

WeasyPrint - это движок с открытым исходным кодом, который отображает PDF и поддерживает абсолютное позиционирование, а также CSS 3 Paged Media для установки полей страницы:

@page { margin: 1cm /* or 0, if you want */ }

Ответ 3

Я тестировал статус браузера для печати элементов "position: absolute" со следующими результатами:

• IE 11: Fail. Не имеет значения, какая ОС, 7,8,8,1.
• IE 10: Pass. Однако вы не можете вернуться к 10 на 8.1, так что люди с этим застряли.
• Firefox до 38.05 = Fail. Неизвестно, если какая-либо версия когда-либо работала.

Хорошей новостью является то, что люди Blink/WebKit делали домашнее задание вместо использования плохого кода.

• Chrome: Pass
• Opera: Pass

Ответ 4

Сделайте свой контейнер в относительном положении. Это единственный способ сохранить абсолютные позиции в одном месте на каждом экране и бумаге. поэтому, если ваш основной div (div, где находится весь ваш контент), добавьте следующее к вашему css:

#maindivname{position:relative;}

Должен сделать трюк.

Ответ 5

Запросы СМИ будут делать трюк - проверьте эту ссылку и предыдущий вопрос, возможно, это поможет. Предложения для отладки таблиц стилей печати

Запрос СМИ, переводящий px в дюймы/см/все необходимое для требований к печати. ​​

Эта граница/маржа, о которой вы упомянули, вероятно, является областью печати вашего принтера (край захвата). Большинство принтеров нуждаются в каком-то типе края для захвата и подачи запаса. Поэтому, когда вы печатаете полноцветный документ (чернила на самом краю), он печатается на складе больше, чем нужно, затем обрезается.

Ответ 6

установить поле с настройкой страницы - это первое и основное решение для печати страницы HTML или DIV.

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

Сделайте окно без заголовка или любой пользовательской панели, используя java script. И поместите все исходные данные в это окно с помощью position:relative, а также установите тип носителя как печать.

position:relative;
media:print;

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