Question

我有一个令我头疼的问题。我正在尝试打印报告并使用print.css正确格式化它，但它每次都完全忽略了我的CSS。以前有人有这个问题吗？我确保CSS文件在正确的目录中，但仍然没有运气。

这是我的模板：

注意：我使用javascript来控制打印按钮，在javascript里面我已经包含了CSS链接。我也尝试将它放在HTML页面上，但这没有帮助。

...
<script type="text/javascript">

function printContent(id){

   str=document.getElementById(id).innerHTML
   newwin=window.open('','printwin','left=100,top=100,'+
                         'width=900,height=400, scrollbars=1')
   newwin.document.write('<HTML>\n<HEAD>\n')
   newwin.document.write('<TITLE>Print Page</TITLE>\n')
   newwin.document.write('<link rel="stylesheet" type="text/css" '+
                         'href="/media/css/print.css" media="print"/>\n')
   newwin.document.write('<script>\n')
   ...

现在，对于这个项目，我使用的是Ubuntu 10.10和Firefox 7.如果这样做有帮助的话。

修改

我为firefox安装了web开发人员工具栏。它允许您将页面视为不同的媒体。现在，当我点击打印时，它会显示我所有的样式更改，但是当我打印时，它不会跟随它们。

Answer 1

<html>
    <head>
        <title>your website title</title>
        <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
        <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
    </head>
    <body>
        <input type="button" value="Print" onClick="javascript:window.print();" />
    </body>
</html>

也许您可能想要给出上面的HTML模板，看看它是否适合您或适合您的需求。

在我看来，你提议的功能实际上更好用javascript写在服务器端而不是客户端，因为你试图在那里动态生成html页面。您可以将该页面输出为print.html或其他内容，一旦将其发送到客户端，您就可以应用print.css样式并进行打印。无论如何，这里只是一些想法，希望它对你的情况有所帮助。欢呼声。

Answer 2

不确定这是否有帮助，但@media print {}应该在打印作业期间封装所有样式。

<style type="text/css">
    @media print{
        /* Make the HR tag have 50 px spacing above and below */
        hr{ padding: 50px 0px; }
    }
</style>

这是支持处理这种类型的样式。该脚本仍然可以负责包含css文件，但@media print {}会告诉其中嵌入的所有样式仅适用于打印作业。

打印/预览忽略我的Print.css

2 个答案: