Добавление кнопки печати на веб-сайт (которая автоматически устанавливает масштаб, поля и скрывает верхний и нижний колонтитулы для печати)

Question

Я понимаю, что использование JavaScript и window.print () имеет ограничения по настройке определенных параметров печати (из-за проблем безопасности). Я также понимаю, что CSS имеет возможность устанавливать определенные элементы (например, @page) для установки документа в альбомной ориентации.

Есть ли способ использовать CSS для установки параметров печати, таких как масштабирование, поля и скрытие верхнего / нижнего колонтитула? Если да, есть ли у кого-нибудь примеры кода для этого? Если это невозможно с помощью JS или CSS, есть ли какие-либо другие инструменты, которые я мог бы использовать, чтобы поместить кнопку печати на страницу, которая автоматически устанавливает определенные параметры печати?

ОБНОВЛЕНИЕ: Хорошо, я ценю ответы всех, и теперь, когда я немного покопался, у меня есть больше разъяснений о том, что мне нужно ... Мне не нужно изменять CSS на странице , Мне нужно автоматически устанавливать локальные параметры печати, когда пользователь нажимает кнопку. Я в приложении .Net. Какие-либо элементы управления ASP.NET для этого? Спасибо.

Answer 1

Я даже не думаю, что JS требуется.Вы можете просто использовать атрибут media при связывании таблиц стилей:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Это таблица стилей, которую использует браузер при печати, и она переопределяет ту, которую вы видите при просмотре сайта.Теперь внутри print.css вы можете изменить все, что захотите, и это повлияет только на напечатанный документ.

Что касается печати, вы можете просто сделать быструю кнопку или элемент, который вызывает window.print():

<input type="button" value="Print" onclick="window.print()" />

Удачи!

Answer 2

Вы можете добавить ссылку на файл CSS, который будет использоваться только для печати, используя атрибут media:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

Или для блока встроенного стиля:

<style type="text/css">
@media print{
  #heading{ display:none; }
}
</style>

Answer 3

Вы можете просто добавить другую таблицу стилей, специфичную для печати:

<link href="print.css" type="text/css" media="print" />

И в эту таблицу стилей вы просто помещаете такие вещи, как:

#header {
  display: none;
}
/* etc */