javascript 打印/预览忽略我的 Print.css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7612794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print/Preview Ignoring my Print.css
提问by TheLifeOfSteve
I have an issue thats causing me some headaches. I'm trying to print a report and format it correctly with a print.css but it completely ignores my css everytime. Has anyone had this issue before? I made sure the CSS file is in the correct directory, etc but still no luck.
我有一个让我头疼的问题。我正在尝试打印报告并使用 print.css 正确设置它的格式，但它每次都完全忽略我的 css。以前有人遇到过这个问题吗？我确保 CSS 文件在正确的目录等中，但仍然没有运气。
Here is my template:
这是我的模板：
Note: I use javascript to control the print button and inside the javascript is where I have included the CSS link. I have also tried putting it just on the HTML page but that didn't help.
注意：我使用 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')
...
Now for this project I am using Ubuntu 10.10, and Firefox 7. If that helps at all.
现在对于这个项目，我使用的是 Ubuntu 10.10 和 Firefox 7。如果这有帮助的话。
Edit
编辑
I installed the web developer toolbar for firefox. It allows you to view the page as different medias. Now when I click print, it shows all my style changes, but when I print, it doesn't follow them.
我为 Firefox 安装了 Web 开发人员工具栏。它允许您以不同的媒体查看页面。现在，当我单击打印时，它会显示我所有的样式更改，但是当我打印时，它不会跟随它们。
采纳答案by woodykiddy
<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>
Maybe you might wanna give above HTML template a go, and see if that works for you or suits your needs.
也许你可能想试一试上面的 HTML 模板，看看它是否适合你或适合你的需要。
In my opinion, your proposed function is actually better to be written on the server side rather than the client side with javascript, as you are trying to dynamically generate html page in there. You can output that page as print.html or something, and once it gets sent to the client, you then apply the print.css style and do the printing. Anyway, just a few ideas here, hopefully it helps a bit in your case. Cheers.
在我看来，您提议的函数实际上最好在服务器端而不是在客户端使用 javascript 编写，因为您正试图在其中动态生成 html 页面。您可以将该页面输出为 print.html 或其他内容，一旦它被发送到客户端，您就可以应用 print.css 样式并进行打印。无论如何，这里只是一些想法，希望它对您的情况有所帮助。干杯。
回答by Furbeenator
Not sure if this helps, but the @media print{} is supposed to encapsulate all styles during a print job.
不确定这是否有帮助，但 @media print{} 应该在打印作业期间封装所有样式。
<style type="text/css">
@media print{
/* Make the HR tag have 50 px spacing above and below */
hr{ padding: 50px 0px; }
}
</style>
This is SUPPOSED to handle this type of styling. The script could still be responsible for including the css file, but the @media print{} would tell all styles embedded in it to apply only to print jobs.
这应该用于处理这种类型的样式。该脚本仍然可以负责包含 css 文件，但 @media print{} 会告诉嵌入其中的所有样式仅适用于打印作业。
