19

我已经（像往常一样）使用@media print规则来指定网页的打印应该如何不同于在线版本。这工作得很好，但测试真的很难。我通常要做的是以下步骤：

  1. screen为和创建不同的样式print。
  2. 以屏幕模式启动您的页面
  3. 将页面打印到 PDF 打印机等。
  4. 看看结果。
  5. 尝试找出行为错误的规则。

我想做什么（但无法使用任何浏览器）：

  1. screen为和创建不同的样式print。
  2. 以屏幕模式启动您的页面
  3. 进入预览打印模式（例如，对于 Opera、Firefox 可用）
  4. 使用 Firebug (Firefox) 或 Dragonfly (Opera) 等可用工具检查 DOM 和当前样式。
  5. 动态更改 CSS，重新加载页面，然后再次查看结果和 DOM。

是否有任何浏览器或浏览器、插件和进程的组合可用于获得类似结果？如果您有想法如何更改文件的组织，只需进行最少的更改即可获得所需的结果，欢迎您。

4

6 回答 6

16

Chrome 开发者工具有这个功能。

  1. 打开您要测试的页面的 Chrome 开发者工具。
  2. 如果抽屉尚未打开，请打开。（按Esc。）
  3. 打开仿真选项卡。
  4. 单击左侧菜单中的媒体。
  5. 检查CSS 媒体并从选择框中选择打印

来源：https ://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

于 2014-03-07T00:24:32.647 回答
10

名为“Web Developer”的 Firefox 插件（https://addons.mozilla.org/en-US/firefox/addon/web-developer/）有一个“按媒体类型显示 CSS”选项。

于 2012-05-27T12:33:28.110 回答
1

您是否尝试过使用Print Friendly Google Chrome 扩展程序。

它是一个不错的扩展，它添加了一个按钮并在单击时生成网页的 pdf。希望这可能比您当前的过程更容易。

于 2012-05-27T12:27:54.493 回答
1

我找到了一个不同的解决方案来解决我的问题，灵感来自Using Rails 3.1 assets pipeline to conditionally use certain css。下面是它的工作原理：

  • 在主 HTML 文件中使用以下样式表指令：

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

  • 隔离样式表中的所有规则

    • 适用于屏幕和打印（样式表application.css：）
    • 仅适用于屏幕（样式表screen.css：）
    • 仅适用于打印（样式表print.css：）

  • 在测试网页打印输出期间，切换主 HTML 文件中的样式表：

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

注意第二行和第三行中的开关media="print|screen"。

结果，您现在可以调用您的主 HTML 文件，并查看在正常条件下将其打印出来的效果。您通常使用的所有工具（Firefox Firebug、Chrome 开发者工具、Opera DragonFly 等）都将正常工作，因此您可以检查 DOM、查看框、即时更改 CSS 并重新加载页面.

对我来说效果很好，如果我偶然发现一些缺点，我也会回来并记录下来。

于 2012-05-28T08:06:07.133 回答
1

如果您在单独的文件中指定打印和屏幕 CSS 规则，您可以使用 Chrome 开发人员工具轻松完成此操作。加载您的页面并打开开发人员工具。在“元素”视图中，编辑 media="print" 行，使其显示为 media="all"。

例如，如果您链​​接样式表，例如：

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css"   />

改变：

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

读书：

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

您现在将在浏览器窗口中将打印样式应用于副本。您可以像浏览任何其他网页一样浏览样式和元素。

于 2012-10-01T15:29:29.507 回答
1

当打印布局需要修改通用样式时，我发现这是一种有助于打印样式的做法。

  1. 创建一个使用 @media print { } 来框定打印样式的打印样式表
  2. 最后应用那个样式表
  3. 在处理打印样式时，暂时注释掉构成打印样式的行
  4. 以您习惯的方式使用 Firebug 和 Web Developer
  5. 取消注释媒体包围

就像是：

    
/* @media print { */

    #sidebar {display:none;}

/* } */
于 2013-02-17T03:14:23.540 回答