如何处理HTML页面的打印？

Question

在我的作品集网站中，我将我的项目列在不同的选项卡（选项卡菜单）下。这样做效果很好，但打印时需要用户点击选项卡、打印、再点击下一个选项卡并再次打印同一页才能获取所有内容。作为一个作品集，我认为访问者想要打印所有内容。

是否有一种通用的方法来创建打印网页时不同的样式？或者我应该在我的页面上添加一个打印机图标，将用户重定向到另一个页面，在那里所有数据都是一大块，然后提示用户的浏览器开始打印？

- Jaran

Answer 1

您可以使用带有CSS的媒体类型：

像这样：

<link rel="stylesheet" type="text/css" media="screen" HREF="screen.css" />
<link rel="stylesheet" type="text/css" media="print" HREF="print.css" />

media="screen" 通常用于屏幕显示，而在打印时会使用 media="print" 版本的 CSS。您可以使用该样式表来覆盖选项卡样式，以便内容始终可见...您可以通过打印预览查看此效果。

- Nick Craver

Answer 2

我大多数时候同意Nick的观点，然而，我通常更喜欢将我的CSS最终保存在一个文件中：

@media print {
    #top {
        width: 100% !important;
        font-size: 120% !important;
        height: 2em !important;
    }
    #top h3 {
        width: 100% !important;
        text-align: center !important;
    }
}

或者其他的。基本上，您将打印样式表放在与其他样式相同的文件中，但用“@media print { ... }”括起来。

- Chibu

Answer 3

我通常使用打印媒体标签来为我的页面定义打印样式：

@media print
{
    #header, #nav
    {
        display: none; \\* to not print an element *\
    }
}

您可以按照上面所示的方法将此内容添加到您的样式表中，或者您也可以在链接标签中添加媒体属性：

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

- Dug

Answer 4

我更喜欢使用单独的“打印友好”页面，该页面消除图形和不必要的侧边栏等。当人们想要打印浏览器页面时，他们通常（尽管不总是）感兴趣的是那种在Word文档中流畅呈现的文本。

- Robusto

Answer 5

创建一个大文件并添加可读性。 这是所需的JavaScript的干净版本，用于调用他们提供的书签：

function Readability() {
    readStyle = 'style-newspaper';
    readSize = 'size-medium';
    readMargin = 'margin-wide';
    _readability_script = document.createElement('SCRIPT');
    _readability_script.type = 'text/javascript';
    _readability_script.src = 'http://lab.arc90.com/experiments/readability/js/readability.js?x=0';  //+ (Math.random());
    document.getElementsByTagName('head')[0].appendChild(_readability_script);
    _readability_css = document.createElement('LINK');
    _readability_css.rel = 'stylesheet';
    _readability_css.href = 'http://lab.arc90.com/experiments/readability/css/readability.css';
    _readability_css.type = 'text/css';
    _readability_css.media = 'all';
    document.getElementsByTagName('head')[0].appendChild(_readability_css);
    _readability_print_css = document.createElement('LINK');
    _readability_print_css.rel = 'stylesheet';
    _readability_print_css.href = 'http://lab.arc90.com/experiments/readability/css/readability-print.css';
    _readability_print_css.media = 'print';
    _readability_print_css.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(_readability_print_css);
}

- Mike Thomsen

Answer 6

嗯，一般来说这取决于你如何实现你的“选项卡”。但是你可以将所有内容放在一个HTML页面中，然后使用CSS进行标记和JS来隐藏/显示一个“选项卡”的内容。

然后你可以为打印使用另一种样式表，以便将整个页面格式化为适合打印的格式。

然而，这可能会让用户感到困惑，他们期望获得屏幕上所看到的打印输出，因此最好链接到一个页面，显示所有项目在一个页面上。有些人甚至更喜欢在屏幕上阅读它。

- sleske