Question

我希望让客户从网页上获得漂亮的打印页面。

因此，我从

更改以下行

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

到

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

screen.css和print.css的内容相同。

然而，对于print版本，我意识到我所有的CSS样式都已消失。表颜色，填充，边距，字体......都没了。当我在FireBug下查看时，似乎没有风格。

我可能知道我错过了什么吗？

print.html

<html>
<head>
<title>
</title>
    <link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
<body>
<div>

<div class="main-title">Worksheet</div>               

<div class="header-table-container">
<table>
  <tbody>
  <tr>
    <th>House Address</th>
    <td>33, Robinson Road.</td>
  </tr>
  <tbody>
</table>
</div>

<div class="main-table-container">
<table>
  <tbody>
  <tr>
    <th width="10%" rowspan="2">Parts</th>
    <th width="90%" colspan="4">Doraemon</th>
  </tr>
  <tr>    
    <th width="25%">Trial 1</th>
    <th width="25%">Trial 2</th>
    <th width="25%">Trial 3</th>
    <th width="25%">Range</th>
  </tr>
  <tr>
    <td class="numerical">1</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>    
  </tr>
</tbody></table>
</div>

<div class="main-table-container">
<table>
  <tbody>
  <tr>
    <th width="10%" rowspan="2">Parts</th>
    <th width="90%" colspan="4">Doraemon</th>
  </tr>
  <tr>    
    <th width="25%">Trial 1</th>
    <th width="25%">Trial 2</th>
    <th width="25%">Trial 3</th>
    <th width="25%">Range</th>
  </tr>
  <tr>
    <td class="numerical">1</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>    
  </tr>
</tbody></table>
</div>

<div class="main-table-container">
<table>
  <tbody>
  <tr>
    <th width="10%" rowspan="2">Parts</th>
    <th width="90%" colspan="4">Doraemon</th>
  </tr>
  <tr>    
    <th width="25%">Trial 1</th>
    <th width="25%">Trial 2</th>
    <th width="25%">Trial 3</th>
    <th width="25%">Range</th>
  </tr>
  <tr>
    <td class="numerical">1</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>    
  </tr>
</tbody></table>
</div>
</body>
</html>

print.css

body {
    color:#000000;
    font-family:Helvetica,Arial,sans-serif;
    font-size:small;
}

table {
    border:1px solid #BBBBBB;
    border-collapse:collapse;
    border-spacing:0;
    clear:right;
    margin:1em 0 0 1px;
    font-size:small;
}

th  {
    background-color:#E5ECF9;
    border:1px solid #BBBBBB;
    font-weight:bold;
    padding:3px 6px;
    text-align:left;
}

td {
    background-color:#FFFFFF;
    border:1px solid #BBBBBB;
    padding:3px 6px;
    text-align:left;
    vertical-align:top;
}

th.numerical,
td.numerical {
    text-align:right;
}

.main-title {
    text-align:center;
    font-weight:bold;
    font-size:large ;
}

.header-table-container {
}

.main-table-container {
    float:left;
    margin:0px 20px 0px 0px;
    width:30%;
}

Answer 1

您说已将行更改为media="print" ...我认为您的页面上没有media="screen"样式表了吗？此外，您正在查看Firebug中的页面，样式已经消失了吗？你似乎对你所做的事情有一些误解......

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

表示每当在屏幕上显示 时，都会使用样式表screen.css。

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

表示“只要打印此文档，就会使用样式表print.css。

print样式表仅在打印页面时适用。 screen样式表仅在文档显示在屏幕上时应用。如果您只有一个或另一个，您的页面只有样式，如果它显示在屏幕上或打印。在您的情况下，页面应该看起来很好，但在屏幕上查看时没有样式。如果您希望在两种情况下都进行样式设置，则需要链接两个样式表，一个用于屏幕，另一个用于打印。

话虽如此，大多数浏览器在打印时也应用screen样式表，除非您明确包含print样式表。即，如果两个样式表无论如何相同，您可能不需要包含单独的打印样式表。

Answer 2

Firebug不允许您调试打印CSS。而这无论如何都不准确，因为它最终会进入打印机，而不是浏览器。

另请注意，即使您在打印CSS中声明它们，也不会使用所有背景。不同的浏览器会做不同的事情。有些甚至可以反转黑色背景的颜色，白色文本页面。

您需要使用打印预览按钮来查看打印样式对事物的影响。

Answer 3

我发现这种方式很好，你不必创建一个新的html文件

function printPage(){
      var w = window.open();

      var headers =  $("#headers").html();
      var field= $("#field1").html();
      var field2= $("#field2").html();

      var html = "<!DOCTYPE HTML>";
        html += '<html lang="en-us">';
        html += '<head><style></style></head>';
        html += "<body>";

        //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
        if(headers != null) html += headers + "<br/><br/>";
        if(field != null) html += field + "<br/><br/>";
        if(field2 != null) html += field2 + "<br/><br/>";

        html += "</body>";
        w.document.write(html);
        w.window.print();
        w.document.close();
    };

适合打印的网页

3 个答案: