Javascript 如何强制浏览器应用特定媒体类型呈现页面

假设我有一个带有标签的html页面，我希望这个标签在屏幕上是绿色的，但在打印时是红色的

我的最佳解决方案是在CSS上指定媒体类型：

@media print {
  #lable {color: red}
}
@media screen {
  #lable {color: green}
}

但现在想象一下，我有一个工具，可以获取任何URL并将其内容转换为PDF文档（我拥有该工具和URL目标页面）。我想用可打印的布局来生成PDF，而不是我在屏幕上看到的版本

所以我会设置一个查询字符串参数，告诉我的页面呈现为“可打印文档”。类似于：www.myPage.com？viewsprint=true

现在我需要一种方法，使用javascript，告诉浏览器应用媒体打印样式呈现页面（即使我将在屏幕上看到它）

问题：这可能吗

---

或者，我可以在两个不同的文件（print.CSS和screen.CSS）之间分割CSS规则，然后使用javascript仅在查询字符串中存在viewAsPrint时加载print.CSS。但我试图避免这种解决方案，因为不同文件中的规则之间很容易发生冲突

---

谢谢

事实上，这是最好的解决方案，如果css和html为您提供了这样的解决方案，为什么要使用js？为什么不点击Ctrl+p并选择“另存为PDF”？您确定PDF刮板会实际评估JavaScript吗另一个选项是检测viewAsPrint服务器端，然后返回您想要的任何内容。@AlexK。谢谢这是一个重要的观察结果。是的，EvoPdf支持javascript。我在尝试不继续点击打印预览时发现了这一点。我希望能够在Chrome中打开开发工具并调整CSS布局。就在这篇文章中，我意识到我只需要暂时将“打印”改为“屏幕”，以查看定义的可打印区域，然后在对布局满意时再进行更改。事实上，这是最好的解决方案，如果css和html能够满足您的需要，为什么要使用js？为什么不点击Ctrl+P并选择“另存为PDF”？您确定PDF刮板会实际评估JavaScript吗？-另一个选项是检测viewAsPrint服务器端，然后返回您想要的任何内容。@AlexK。谢谢这是一个重要的观察结果。是的，EvoPdf支持javascript。我在尝试不继续点击打印预览时发现了这一点。我希望能够在Chrome中打开开发工具并调整CSS布局。就在这篇文章中，我意识到我只需要暂时将“打印”改为“屏幕”，以查看定义的可打印区域，然后在对布局感到满意时再进行更改。