Question

在我的投资组合网站中，我已将项目列在单独的标签下（标签菜单）。除了打印需要用户点击标签，打印，点击下一个标签并再次打印同一页面以获取所有内容之外，这种方法效果很好。作为一个投资组合，我假设访问者想要打印所有内容。

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

Answer 1

像这样：

<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。您可以使用该样式表覆盖选项卡样式，以便内容始终可见......您可以通过打印预览看到这一点。

Answer 2

我主要赞同尼克，但是，我通常更喜欢将我的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 {...}”包围;

Answer 3

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

Answer 4

我通常使用print media标签为我的页面定义打印样式：

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

您可以将其添加到样式表中，如上所示，也可以将media属性添加到链接标记中：

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

Answer 5

嗯，一般来说，这取决于你如何实现“标签”。但是你可以将所有内容放到一个HTML页面中，然后用CSS来标记它，而JS则只隐藏/显示一个“标签”的内容。

然后你可以使用另一种样式表进行打印，这将以打印机友好的格式格式化整个页面。

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

Answer 6

创建一个大文件并添加Readability。这是调用它所需的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);
}

如何处理HTML页面的打印？

6 个答案: