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

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

<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>

источник

2012-03-23 Mert Karatas

[СМИ печать CSS] (http://www.w3.org/TR/CSS2/media.html) – jbabey

попробовать эту конструкцию: '<типа стиля = "текст/CSS"> @media печать тела {...} ... ' – Antonix

проверить это: http: // stackoverflow.com/questions/9724163/how-to-use-javascript-to-print-the-contents-on-a-div/ – Jigs

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

<style type="text/css"> 
    @media print 
    { 
     body { 
      /* styles */ 
     } 
    } 
</style>

источник

2012-03-23 13:31:12

Он по-прежнему остается таким же, что и css на странице печати. –

Какой браузер вы используете? Также нет гарантии, что «Предварительный просмотр» будет стилизовать документ; потому что он по усмотрению программы предварительного просмотра, поэтому на самом деле попробуйте распечатать страницу. –

Я использую Chrome, и я попытался на самом деле распечатать. Но css не применяется. –

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

Следует отметить, что браузер не будет применять все ваши стили в режиме печати. Он выбирает и выбирает, какие стили печатаются соответствующим образом. Я также обнаружил, что если вы используете доктрину 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 (v19.0.1077.3 канарейки), который вы упомянули вы используете, чтобы проверить это.

enter image description here

источник

2012-03-23 13:52:11 scottheckel

Существует много способов для этого:

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

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

Третье:

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

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

источник

2012-03-23 13:52:33

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

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

Пример:

$('SelectorToPrint').printElement();

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

function printDiv(divToPrint) { 

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

      } 
     } 
    ); 

}

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

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

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

источник

2012-03-23 13:58:45 ThdK

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

ответ

Смежные вопросы