Пытаетесь распечатать содержимое DIV, используя позиционирование с сохранением значений CSS?

Question

Пытаетесь распечатать содержимое DIV, используя позиционирование с сохранением значений CSS?

0

У меня есть новый проект, где мне нужно отображать сертификат на экране, а также иметь возможность распечатывать его на печатном принтере. Мне нужно отобразить 4 поля, которые основаны на классе класса пользователей или пройденном курсе. Моя проблема заключается в том, что я использую CSS для отображения изображения сертификата в качестве фонового изображения в DIV, поскольку для остальных 4 переменных полей я использую относительное позиционирование с TOP и LEFT для размещения на экране. Что касается экрана, это выглядит здорово, но когда я печатаю его в PDF или в твердой копии, я теряю позиционирование полей. Они находятся ниже изображения на бумаге и не сохраняют свои значения CSS... Не знаете, что лучший способ запрограммировать что-то вроде этого? Неужели я ошибаюсь? Я просмотрел веб-страницы со многими статьями, попробовал различные решения безрезультатно. Можете ли вы использовать CSS для размещения при печати содержимого в DIV? Это что-то, что легко сделать в Javascript как клиент, а не использовать PHP вместе с CSS, HTML?

Chris Fallon 11 нояб. 2013, в 17:54

Источник

Теги:

php

html

css

printing

2 ответа

0

Размещение CSS должно отлично работать для печати, за исключением случаев, когда это не так. Я не могу быть уверен в том, что вызывает ваши конкретные проблемы, но я могу предложить способ, которым я попытаюсь его исправить.

В вашем HTML создайте отдельный блок стиля, например:

<style type="text/css" media="print">
/* Put print-specific styles here */
</style>

Вы можете бросить любой CSS, который вам нужен, и это повлияет только на печатный внешний вид - вы вообще не испортите макет экрана. Посмотрите, можете ли вы это исправить. Удачи.

Chris Broski 11 нояб. 2013, в 15:19

Ещё вопросы

Jeremy Carlson · Accepted Answer · 2013-11-11T14-21-00.000Z

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

Если вы печатаете то, что знаете, будет занимать менее одной страницы, я бы рекомендовал вам использовать абсолютное позиционирование практически для всего. Вместо пикселей или ems используйте единицы измерения (или проценты) в качестве единицы измерения. Не забывайте, что вы также можете просто установить top, left, right и bottom части абсолютного элемента, а не указывать ширину или высоту.

@Protonfish прав насчет использования таблицы стилей только для печати. Вы также можете обратиться к определенному набору правил в своей обычной таблице стилей, используя @media print { rules here }.