Javascript 打印/预览忽略my Print.css_Javascript_Html_Css_Django

Javascript 打印/预览忽略my Print.css

javascript html css django

Javascript 打印/预览忽略my Print.css,javascript,html,css,django,Javascript,Html,Css,Django,我有一个让我头疼的问题。我试图打印一份报告，并使用print.css正确格式化，但每次它都完全忽略我的css。以前有人有过这个问题吗？我确保CSS文件在正确的目录中，等等，但仍然没有运气这是我的模板：注意：我使用javascript控制打印按钮，javascript中包含CSS链接。我也试着把它放在HTML页面上，但是没有用。。。函数printContent（id）{ str=document.getElementById（id）.innerHTML newwin=window.open

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

这是我的模板：

注意：我使用javascript控制打印按钮，javascript中包含CSS链接。我也试着把它放在HTML页面上，但是没有用

。。。
函数printContent（id）{
str=document.getElementById（id）.innerHTML
newwin=window.open（“”，'printwin'，'left=100，top=100，'+
'宽度=900，高度=400，滚动条=1'）
newwin.document.write（'\n\n'）
newwin.document.write（'Print Page\n'）
newwin.document.write（'\n'）
newwin.document.write（'\n'）
...

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

编辑

我为firefox安装了web developer工具栏。它允许您以不同媒体查看页面。现在，当我单击“打印”时，它会显示我所有的样式更改，但当我打印时，它不会跟随这些更改。


<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样式并进行打印。任何顺便说一下，这里有一些想法，希望对你的情况有所帮助。干杯。

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

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


@媒体印刷品{
/*使HR标签上下间隔为50像素*/
hr{填充：50px 0px；}
}

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

CSS中有什么？换句话说，到底是什么让你认为自己的样式被忽略了？我问这个问题是因为浏览器对打印样式表的支持真的很糟糕，而且有很多本来应该工作的东西根本不工作。你试过忽略

media=“print”

？由于该窗口专门用于打印，因此我认为无需将电子表格附加到特定的媒体类型。@Pointy样式表的标题、hr样式元素等的字体大小不同。请查看我的上文edit@SurrealDreams我还尝试省略media=“print”但是没有这么幸运你为什么要动态地加入css？我认为这会给你带来问题，因为javascript在打印时不会被执行。我相信你的意思是不会

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