CSS media print not working

У меня есть страница PHP, где мне нужно поставить кнопку print. Для этого я добавил Javascript ниже:CSS media print not working

<script type="text/javascript"> 
    function PrintContent() { 
     var DocumentContainer = document.getElementById('prnt'); 
     var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes'); 
     WindowObject.document.writeln(DocumentContainer.innerHTML); 
     WindowObject.document.close(); 
     WindowObject.focus(); 
     WindowObject.print(); 
     WindowObject.close(); 
    } 
</script>

Теперь, чтобы напечатать DIV prnt с некоторыми CSS, я добавил CSS

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

Мои print.css является:

.preorder_list 
{ 
    overflow:hidden; 
} 
.preorder_list h2 
{ 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#0e337f; 
    font-size:17px; 
    margin-top:40px; 
} 
.preorder_list table 
{ 
    width:750px; 
    background:#d5d5d5; 
    padding:8px 4px 8px 4px; 
    border-radius: 4px; 
    -moz-border-radius:4px; 
    -webkit-border-radius: 4px; 
    border:1px solid #dbdbe2; 

} 
.preorder_list th 
{ 
    padding:5px; 
} 
.preorder_list td 
{ 
    text-align:center; 
    font-family:"Trebuchet MS"; 
    font-size:15px; 
    padding:5px; 
} 
.preorder_list input[type="text"] 
{ 
    width:50px; 
    border:1px solid #b10c04; 
    text-align:center; 
} 

.preorder_list input[type="text"]:focus 
{ 
    color:#1226a1; 
    font-weight:bold; 
} 

.preorder_list.mw 
{ 
    padding:10px 0 10px 20px; 
    border:1px solid #e4e3df; 

} 
.preorder_list.mw:hover 
{ 
    background:#fbfbfa; 
} 
.preorder_list.sw 
{ 
    margin-top:20px; 
    padding:10px 0 10px 20px; 
    border:1px solid #e4e3df; 
} 
.preorder_list h1 
{ 
    color:#1b2d58; 
    font-size:18px; 
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
} 
.preorder_list.sw:hover 
{ 
    background:#fbfbfa; 
}

Где preorder_list является класс, где находятся все данные, приведенный выше код такой же, как у css, который я использовал для отображения. Но я не получаю желаемый вид, когда я нажимаю Pirnt, пожалуйста, взгляните на изображения. Normal view print preview in one note-same output

EDIT:

модифицированный код JavaScript:

var DocumentContainer = document.getElementById('prnt'); 
     var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes'); 

     WindowObject.document.writeln('<!DOCTYPE html>'); 
     WindowObject.document.writeln('<html><head><title></title>'); 
     WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css" media="print">'); 
     WindowObject.document.writeln('</head><body>'); 
     WindowObject.document.writeln(DocumentContainer.innerHTML); 
     WindowObject.document.writeln('</body></html>'); 

     WindowObject.document.close(); 
     WindowObject.focus(); 
     WindowObject.print(); 
     WindowObject.close();

источник

2013-06-15 Nitish

Как вы добавили этот css? Теги 'link' должны быть помещены в раздел' head' страницы, вы не создали его во всплывающем окне. – Teemu

Я добавил css – Nitish

Если вы собираетесь создать документ с помощью document.write(), вы должны создать весь документ. Попробуйте это:

WindowObject.document.writeln('<!DOCTYPE html>'); 
WindowObject.document.writeln('<html><head><title></title>'); 
WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css">'); 
WindowObject.document.writeln('</head><body>'); 
WindowObject.document.writeln(DocumentContainer.innerHTML); 
WindowObject.document.writeln('</body></html>');

Обратите внимание, что media="print" имеет аффект только на самой печати, страница не стиль на экране. Вы можете опустить атрибут или вместо этого использовать media="all".

источник

2013-06-15 10:17:22 Teemu

Я изменил свой коэффициент javascript, тот же результат! (Я не привык к кодам js!) – Nitish

Это мое плохо ... Вы используете '' media = "print" ', он не используется на экране, вы можете видеть эффект только на печатной бумаге. Просто удалите Я исправил свой ответ. – Teemu

CSS media print not working

ответ

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