如何打印内联CSS样式？

Question

有没有一种方法可以打印内联的CSS样式？

我使用以下代码来打印部分代码：

w=window.open();
w.document.write($('#printable').html());
w.print();
w.close();

我可以使用外部文件并将其设为media=print，但html的一部分是由php生成的字符，如果我制作每个可能结果的类来实现它，那会很麻烦。您有什么好的建议吗？谢谢。

- Mike

---

需要打开弹出窗口吗？ - Ahsan Rathod

不，必须打印<div id='printable'>。 - Mike

你能详细说明一下你的目标吗？你是想从一个HTML文档中分离出所有内联CSS样式并将它们打印到打印机上吗？还是你只是想执行一种“打印源代码”的任务，将整个页面的HTML发送到打印机上供用户使用？ - Jon Adams

我只想打印所选的 div。就像在浏览器中显示的那样。 - Mike

请查看我给你的答案。 - Ahsan Rathod

Answer 1

查看演示：http://jsfiddle.net/rathoreahsan/x69UY/

如果您这样做会怎么想：

<div id="printableDiv">
    <style type="text/css">
        @media print {
            #printable { 
               color: red; 
               // Any Other style you want to add 
             }
        }
    </style>
    <div id="printable">
        This Text will print in red color.
    </div>
</div>

JavaScript/jQuery 代码：

w=window.open();
w.document.write($('#printableDiv').html());
w.print();
w.close();

在这种情况下，当一个弹出窗口打开并获取了printableDiv的HTML时，打印机样式将被包含在该弹出窗口中，因此打印机将从该弹出窗口中读取样式，并按照这种方式进行打印。

- Ahsan Rathod

---

好的，有两个原因，我不能使用这段代码。主要问题是，这样做我必须给每个我不想打印的页面元素添加类.noprintable，这是不可能的。第二个问题是，它没有解决我需要打印内联CSS的问题。 - Mike

Answer 2

我曾经遇到过同样的问题，因为我使用了instyle样式来动态更改背景颜色，但是在打印时颜色没有出现。 styleSheets[3]是我的print.css文件。

这对我有用： 我将它包含在smarty foreach中，以便为某些元素设置背景颜色。

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>

- Paul Wolbers