如何使用屏幕样式表进行打印？

我使用的许多网站的印刷媒体样式表确实很差，但是它们的屏幕样式表却很好。

有什么办法告诉我的浏览器忽略打印样式表，而仅使用屏幕样式表进行打印？

当我想向客户展示两者之间的区别时，我也想这样做。

我发现使用Chrome开发者工具（Ctrl+ Shift+ I）唯一有效。

1. 搜索的所有实例media="screen"并删除该属性。
2. 然后搜索media="print"并删除整个链接。
3. 然后尝试打印。

通常，这使我的页面具有屏幕样式。

如果您真的只想禁用打印样式，则可以安装Web Developer扩展（我认为有适用于Firefox和Chrome的版本）。它具有一个禁用打印样式的按钮。但是，它不会扩展“屏幕”样式以进行打印，因此在大多数情况下，它无法按照您希望的方式工作。

遵循James的想法，但使用jQuery：

$('*[media="screen"],*[media="print"]').attr('media', '')

如果页面没有jQuery，请注入它：

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);

在开发人员工具中有一种直接选择媒体仿真的新方法，请参阅https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

狮子座在那里有个好主意，但与詹姆斯所说的完全不同：应该是

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

提示：将以下内容另存为书签，以方便使用：

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

这将预加载jQuery并等待2秒才能完成，但是如果此等待还不够，请再次运行它，同时应该已经加载了jQuery。

我找到了在Chrome中执行此操作的简便方法。

在仿真CSS媒体中打开开发人员工具>渲染>选择“屏幕”。

现在尝试打印。它将选择屏幕CSS而不是Print CSS。

1. 詹姆斯说什么;）

   您可以打开Chrome开发者工具设置（右下角）检查输出，然后在“替代”中选择选项“模拟CSS媒体打印”视图。通过切换此选项，您可以比较打印视图和屏幕视图。玩得开心！

2. 安装此插件：https : //chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

现在，背景图像和颜色也会被打印出来。

错误：不适用于CSS精灵。

编辑：Chrome浏览器在2014年改变了打印视图，我想您就不再需要使用链接的插件了。

我只是在一个网站上遇到一个问题，该网站使用@media print和@media screen，只有一个CSS文件，因此禁用单独的打印CSS文件的解决方案对我不起作用。虽然我当然可以在查看页面时编辑CSS并注释掉打印块，但这些更改并没有保留到打印预览中。

我找到的解决方案是Firefox和Chrome的Print Edit扩展。它使您可以在打印之前立即编辑页面，并包括一个简单的按钮以使用页面的Web样式（@media screen）。

我确实必须稍微改变我要打印的比例，因为打印表面的比例大约为17:22，而浏览器的比例大约为16：9，所以页面上的某些内容在水平方向上有些拥挤。我还必须启用单独打印背景色和图像的功能

有时，网站使用CSS来指定在屏幕上和打印时应使用不同的样式。这通常是好的，但也可能造成混乱和问题。检查页面的源代码，并查找类似以下内容的内容：

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

这个问题很常见的原因之一是使用流行的Bootstrap框架的网站使用了普遍存在的bootstrap.min.css文件，该文件包含上面的CSS样式。

寻找的关键是@media print。网站通常具有复杂的结构，可能有助于将页面保存在本地并使用递归文本搜索工具进行检查。

当您认为自己已在CSS代码中找到该位置时，可以使用其开发人员功能直接在浏览器中修改页面。（在Chrome中，按Ctrl+ Shift+ I启动它们。）

搜索CSS代码，然后删除或使导致问题的行无效。通过使用“打印预览”来验证该操作是否有效。

安装Greasemonkey插件并使用下面给出的脚本。

我修改了我在这里找到的脚本http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

最后，我将“屏幕”更改为“打印”（我对jQuery一无所知，所以不要问我任何问题），以便实际上将屏幕版本发送给打印机。当打印为pdf时（使用Foxit或Nitro Pdf打印机），我在横向模式下将页面类型设置为Tabloid Extra，因此pdf大小或多或少与屏幕大小匹配。请享用！记住，我对编程一无所知，因此功劳归于原始作者。

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);

尝试启用"Print background (colors & images)"in选项Page Setup并检查其外观Print Preview（适用于FF）。

詹姆斯类似-使用“源”选项卡中的Chrome开发者工具，以及更换的所有实例media print用media speech。因此，所有用于隐藏导航栏等的css更改在打印时都不会应用（但在使用文本到语音转换时会应用）

上面的JQuery可以做到这一点。

这在我使用CSS的CDN时非常有用，因此自定义就可以了

在Mac上有一个很棒的工具。

安装Paparazzi =>将URL复制到Paparazzi =>将图像另存为=> PDF

（在PDF导出中，甚至可以选择Text ist，它也不只是一个“图像”）

https://derailer.org/paparazzi/screenshots

请享用 ：-）