Как я могу применить CSS для печати? - PullRequest
Новая
       21

Как я могу применить CSS для печати?

0 голосов
/ 23 марта 2012

Я пытаюсь напечатать div на одной из моих страниц, но я не могу применить css при печати. Запись media = "print" внутри тегов стиля не работает. Что мне делать? 

   <style type="text/css" media="print">
body
{
font-size:medium;
color:Black;
font-size:14px;
}
input 
{
margin:0px;
font-size:14px;


}
.grid
{
border-color:Gray;
border-width:1px;

}
.alan
{
border-style:none;

}

.grid1
{
border-color:Gray;
border-width:1px;
}
    </style>

Ответы [ 4 ]

8 голосов
/ 23 марта 2012

Используйте следующее: 

<style type="text/css">
    @media print
    {
        body {
            /* styles */
        }
    }
</style>
3 голосов
/ 23 марта 2012

Для этого есть много способов:

Первый: <style type="text/css"media="print">

Второй: <style type="text/css"media="screen">

Третий: 

@media print 
 {
 body { margin: 0; background-image: none; font-size: 12pt; }
 }

Надеждаэто полезно для вас ..

1 голос
/ 23 марта 2012

То, что вы делаете в исходном сообщении, будет работать нормально.Это просто старая школа способ ведения дел.

Следует отметить, что браузер не будет применять все ваши стили в режиме печати. ​​ Он выбираети выбирает, какие стили подходят для печати.Я также обнаружил, что если вы используете тип документа HTML 5. Он даст вам несколько иные результаты.

Вот простой пример, подобный вашему, который вы можете попробовать в браузере. 

<!DOCTYPE html>
<html>
<head>
<style media="print">
.hideForPrint { display:none; }
.anotherSTyle { font-family: Verdana; text-decoration:underline; }
</style>
</head>
<body>
<div class="hideForPrint">Print This?</div>
<div class="anotherStyle">Another Style</div>
</body>
</html>

Вот снимок экрана с предварительным просмотром печати Chrome (версия 19.0.1077.3 канарейка), который вы упомянули, чтобы использовать его для проверки.

enter image description here

0 голосов
/ 23 марта 2012

Я использую плагин Jquery Print Element 1.2 для печати только содержимого div. Таким образом, вам не нужно устанавливать отображение css: нет для всех тех элементов, которые вы не хотите печатать.

Я знаю, что это не прямой ответ на ваш вопрос, но воспринимайте это как доброе предложение.

Пример: 

$('SelectorToPrint').printElement();

Вот моя реализация с использованием опции classNameToAdd: 

function printDiv(divToPrint) {

   $('#' + divToPrint).printElement(
        {
            printBodyOptions:
            {
                classNameToAdd: 'printarea'

            }
        }
   );

}

После того, как вы добавили плагин на свою страницу, вы можете вызвать вышеуказанную функцию, когда пользователь нажимает кнопку / ссылку печати. 

<a href="#" onclick="javascript:printDiv('theIDofYourDiv')">Print part of the page</a>

Вы можете скачать этот плагин и найти дополнительную документацию здесь .

...