在打印前查看打印样式表CSS

Question

3

为了在打印时与屏幕显示不同，我们使用@media print规则。这很好。但是我想在打印对话框弹出之前，在浏览器窗口中显示将要打印的内容。有办法实现吗？

- Raghuram Vadapalli

问题不在于调整大小。我想要在浏览器窗口上显示即将打印的内容。 - undefined

一个完全超出常规的想法可能是使用一个将其head meta设置为打印机而不是网页的iframe？但是我不知道如何在技术上实现这一点，如果可能的话。 - undefined

@user3930007，相同的逻辑应该适用。 - undefined

2

浏览器自带打印预览选项。让用户使用它们即可，无需重复实现常见的内置功能。 - undefined

@Quentin еҪ“з„¶пјҢдҪ зҹҘйҒ“@media printеңЁи·ЁжөҸи§ҲеҷЁж—¶жҳҜеҗҰдјҡз”ҹж•ҲпјҢе°ұеғҸдҪҝз”Ёwindow.print()дёҖж ·еҗ—пјҹ - undefined

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

你可以使用这篇文章中的相同概念如何用javascript触发用户需求的媒体查询，但你需要通过一个按钮来触发/切换你的body标签上的一个名为previewprint的类名。

你的CSS可能看起来像这样：

body.previewprint .yourclass {
   property: value;
}

@media print {
  .yourclass {
    property: value;
  }
}

一种方法是添加一个单独的“预览”按钮，该按钮设置previewprint并将“打印”按钮重置/清除。

如果您不想有双重css规则，则只需在新窗口中使用previewprint类，然后使用“预览”按钮打开页面，在那里，用户可以点击“打印”按钮。在这种情况下，“打印css规则”已经设置，不需要媒体查询。

如果只使用“打印”按钮，请执行相同操作，然后在加载时执行window.print()。

我还发现了这篇不错的文章how to detect window.print() finish，您可以在打印完成时做一些很酷的事情。

要拦截Ctrl+P，这里有几篇文章展示如何实现：