如何在屏幕上显示打印媒体css？

I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?

我有一个不同的CSS，当有人打印时应用（下面是我如何做的一个例子）。但我想知道，我想制作一个自定义的“预览打印”（而不是浏览器中的常规打印），但我想知道是否有可能以某种方式获得它以便应用打印媒体css，因为我想在屏幕上显示他们将在纸上打印的内容。有任何想法吗？

<html>
<body>

<style type="text/css">
body 
{
   font-size: 62.5%;
   background-color:black;
}
h1 
{
   color: red;
}
@media print 
{
body{
background-color:yellow;
}

  h1 {
  color: black;
   }
}
</style>

<h1>This is just a test</h1>

</body>
</html>

2 个解决方案

#1

The easiest way would be to create a print.css style sheet that's normally included with print media specified.

最简单的方法是创建一个print.css样式表，该样式表通常包含在指定的打印介质中。

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

Then on your print preview screen, you could use the same print.css with screen media set:

然后在打印预览屏幕上，您可以使用与屏幕媒体集相同的print.css：

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

#2

I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.

我经常打开一个新窗口，用我自己的通用html / body包装器编写，使用打印样式表作为主样式表，使用JavaScript将主体从开启器复制到窗口。

#1