有没有办法将媒体打印 css 启用为正常视图？答案

【问题标题】：Is there a way to enable media print css to a normal view?有没有办法将媒体打印 css 启用为正常视图？
【发布时间】：2019-02-14 19:36:25
【问题描述】：

我开发了一个网站，其中包含一堆打印媒体查询，以便在打印页面时对齐内容。当您在网络浏览器上进入打印模式时，查询效果很好。但我想在常规网页上应用/删除那些@media print 查询，而不必进入打印模式。（通过单击按钮）有什么方法可以实现这一点？

【问题讨论】：

喜欢打印预览？
只删除链接属性中的打印媒体？
@epascarello 你是什么意思？
@DanielA.White 是的。但不同于浏览器的打印预览模块。
让它成为一个普通的样式表来测试并在完成后将其添加回来。

标签： javascript html css printing

【解决方案1】：

除了Boldewyn的回答，如果<style>标签内有@media print样式，可以用@media screen替换：

Array.prototype.forEach.call(document.getElementsByTagName('style'), function(style) {
    style.innerText = style.innerText.replace(/@media print/gi, '@media screen');
});

请参阅demo。

【讨论】：

【解决方案2】：

添加到 yezzz 的答案：如果您在 HTML 中链接了打印 CSS，例如

<link rel="stylesheet" media="print" href="...">

您可以删除 media 属性以在任何地方启用这些样式，无论是在服务器上还是使用 Javascript：

document.querySelector('[media="print"]').removeAttribute('media');

请注意，如果打印样式表中的语句包含在 @media print {} 规则中，这将不起作用。

【讨论】：

我没有单独的样式表来做到这一点。相反，我声明了@media print {}。我想要做的是复制我在打印视图中得到的内容。
那就用我的回答

【解决方案3】：

首先想到的是使用类。简单的例子给你一个大致的想法。如果你有一个按钮可以在 body 上切换 emulateprint 类，你可以使用例如。这个CSS：

body {
  color: black;
}
body.emulateprint {
  /* put same styles as @media print in here */
  color: red;
}

@media print {
  body {
    color:red;
  }
}

【讨论】：