У меня есть новый проект, где мне нужно отображать сертификат на экране, а также иметь возможность распечатывать его на печатном принтере. Мне нужно отобразить 4 поля, которые основаны на классе класса пользователей или пройденном курсе. Моя проблема заключается в том, что я использую CSS для отображения изображения сертификата в качестве фонового изображения в DIV, поскольку для остальных 4 переменных полей я использую относительное позиционирование с TOP и LEFT для размещения на экране. Что касается экрана, это выглядит здорово, но когда я печатаю его в PDF или в твердой копии, я теряю позиционирование полей. Они находятся ниже изображения на бумаге и не сохраняют свои значения CSS... Не знаете, что лучший способ запрограммировать что-то вроде этого? Неужели я ошибаюсь? Я просмотрел веб-страницы со многими статьями, попробовал различные решения безрезультатно. Можете ли вы использовать CSS для размещения при печати содержимого в DIV? Это что-то, что легко сделать в Javascript как клиент, а не использовать PHP вместе с CSS, HTML?
CSS для печати может быть жестким, отчасти потому, что тестирование связано с тем, что он снова и снова переходит в состояние предварительного просмотра в разных браузерах. И разные браузеры могут интерпретировать печатный CSS с резкими различиями.
Если вы печатаете то, что знаете, будет занимать менее одной страницы, я бы рекомендовал вам использовать абсолютное позиционирование практически для всего. Вместо пикселей или ems используйте единицы измерения (или проценты) в качестве единицы измерения. Не забывайте, что вы также можете просто установить top
, left
, right
и bottom
части абсолютного элемента, а не указывать ширину или высоту.
@Protonfish прав насчет использования таблицы стилей только для печати. Вы также можете обратиться к определенному набору правил в своей обычной таблице стилей, используя @media print { rules here }
.
Размещение CSS должно отлично работать для печати, за исключением случаев, когда это не так. Я не могу быть уверен в том, что вызывает ваши конкретные проблемы, но я могу предложить способ, которым я попытаюсь его исправить.
В вашем HTML создайте отдельный блок стиля, например:
<style type="text/css" media="print">
/* Put print-specific styles here */
</style>
Вы можете бросить любой CSS, который вам нужен, и это повлияет только на печатный внешний вид - вы вообще не испортите макет экрана. Посмотрите, можете ли вы это исправить. Удачи.