Question

我目前正在开发一个已经完成的项目，现在它需要一些增强功能。我会给你一个轻微的一点。它有一个搜索功能，点击结果中显示的名称后显示其他详细信息。现在客户端也要求添加打印选项，这将打印显示的。我也实现了这个功能。现在的主要问题是打印预览页面没有采用最后一页的任何CSS。我使用了css int仅限HTML页面。请参阅代码。我已经提到了Print the contents of a DIV问题。但是它在外部使用了css。当我在内部定义它时，我怎么能使用它。我知道这可能是一个非常基本的问题但我对CSS世界很新。提前谢谢......“

编辑：我已经应用了@print标签。但是在那之后它还没有采用css。这就是为什么我投票将这个问题保持为独特

P.S。我没有对这段狗屎进行编码，其他人做了。

＆＃13;

 <script type="text/javascript">


function printDiv(divName) {

 var printContents = document.getElementById(divName).innerHTML;



        '.td{'+
  ' width:205px;'+
 'margin-top:10px;'+
'margin-bottom:10px;'+
'margin-left:10px;'+
  '}'+

'table{'+
'border-collapse:collapse;'+
'border:1px solid #FF0000;'+

'}'+

'table td{'+
'border:1px solid #000;'+

'}'

        '</style>';

 w=window.open();

 w.document.write(printContent);

 w.print();
 w.close();
}




</script>

＆＃13;

 <style type="text/css">
  body {
    margin: 0;
    padding: 0;

   background: #FFFFFF;
    color: #000000;
    font: 85% "Open Sans", Tahoma, sans-serif;

  }

  .dataGrid {
    border: 1px solid #48627A;
    padding: 0;

    width: 99%;
    height: 100%;

    background: #FFFFFF;
    text-align: left;
  }
.title {
color: #004e90;
font-weight: bold;
font-family: "Open Sans", Tahoma, sans-serif;
font-size: 12px;

}

.res td{

    font-size: 12px;
    font-family: open sans, arial;
    border-top: 1px solid #ddd;
    width: auto;
    padding: 4px;
}



  .dataGridTitle{
    border: 1px solid #0D1115;
 padding-top: 1px;
    padding-right: 3px;
    padding-bottom: 1px;
    padding-left: 3px;

    background: #48627A;
    color: #FFFFFF;
    text-align: center;

    font: bold 0.8em verdana, arial, helvetica, sans-serif;
  }

  .dataGridElement{
    padding-top: 1px;
    padding-right: 3px;
    padding-bottom:1px;
    padding-left: 3px;

    background: #E8EAEA;
    color: #000000;

    font: 0.8em verdana, arial, helvetica, sans-serif;
  }
   .td{

   width:205px;
     font: verdana, arial, helvetica, sans-serif;

  }
  <form>

<div id="print">
<div class="dataGrid" style="margin-top:10px;margin-bottom:10px;margin-left:10px;" >
                <h1 style="margin-top:10px;margin-bottom:10px;margin-left:10px;"  >Partner Details</h1>
                                <table class="res" style="table-layout:fixed; margin-top:10px;margin-bottom:10px;margin-left:10px;"  >
                                <tr>
                                <td class = "td title" ><label for="username">Name</label>
                                </td>
                                <td ><label for="username">{$item.partnername}</label>
                                </td>
                                </tr>



                                <tr>
                                <td class = "td title" ><label for="surname">Address</label>
                                </td>
                                <td><label for="surname">{$item.address}</label>
                                </td>
                                </tr>


                                <tr>
                                <td class = "td title" ><label for="surname">Contact Number</label>
                                </td>
                                <td><label for="surname">{$item.cnumber}</label>
                                </td>
                                </tr>


                                <tr>
                                <td class = "td title" ><label for="surname">Contact Person</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.cperson}</label>
                                </td>
                                </tr>

                                <tr>
                                <td class = "td title" ><label for="surname">Email</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.email}</label>
                                </td>
                                </tr>

                                <tr>
                                <td class = "td title" ><label for="surname">School Center</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.school_center}</label>
                                </td>
                                </tr>
                                
                       <tr>
                                <td class = "td title" ><label for="surname">Training Date</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.t_date}</label>
                                </td>
                                </tr>

                                <tr>
                                <td class = "td title" ><label for="surname">Certification Date</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.c_date}</label>
                                </td>
                                </tr>

                                <tr>
                                <td class = "td title" ><label for="surname">No.Teachers</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.no_teacher}</label>
                                </td>
                                </tr>

                                <tr>
                                <td class = "td title" ><label for="surname">Teachers Certified</label>
                                </td>
                                <td class = "td res" ><label for="surname">{$item.cert_teacher}</label>
                                </td>
                                </tr>

                                <tr>
                                <td class = "td title" ><label 

            </form>


</div>
</div>

＆＃13;

Answer 1

我忘了提到你需要在标签

中链接媒体查询打印标签

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

我更喜欢使用外部css文件

在css文件中使用媒体标记：

所有打印样式都在@media print {...}

中

@media print {

    .header, .footer, .navigation{

    display: none !important; 

    } 
}

有一些规则，请记住，在打印，菜单，侧边栏等时不需要大量的东西......

Answer 2

最后我找到了答案。我不知道@media无法正常工作的原因。所以我在打印功能本身使用了css样式。

w.document.write('<style>h1{font-size:20px;color:#76C04E;width:90%;}</style>');
w.document.write('<style>body{background: #FFFFFF; color: #000000; font: 85% arial, verdana, helvetica, sans-serif; }</style>');

w.document.write('<style>.res td{font-size: 12px;font-family: open sans, arial; border-top: 1px solid #ddd; width: auto;padding: 4px;} </style>');

现在css在打印预览页面中正确显示。但它只适用于firefox。当我找到chrome的解决方案时，会相应地更新答案

感谢。

如何应用css打印div

2 个答案: