HTML，可打印的超链接引用，如目录答案

【问题标题】：HTML, printable hyperlink references, like table of contentsHTML，可打印的超链接引用，如目录
【发布时间】：2011-08-04 22:13:39
【问题描述】：

HTML 文档中的链接通常是可点击的。但是，在打印页面上，该功能自然不可用。

<a href="#foo">Link to foo</a>
[... loads of content ...]
<a name="foo"/>Here is foo

点击屏幕上的“链接到 foo”会将页面滚动到正确的位置。如果打印此文档，有没有办法参考页码？我愿意这样做

<a href="#foo" style="printing: page-reference;">Link to foo</a>

使其打印页码而不是下划线文本“Link to foo”。

这可能吗，使用 HTML 4 或 5、XHTML、CSS 2 或 3，或者借助一些花哨的 javascript？

【问题讨论】：

标签： javascript css html printing-web-page

【解决方案1】：

CSS 允许您为不同的媒体类型指定不同的样式表 - 即屏幕和打印页面，以及音频、盲文等，以及不同的屏幕/页面大小和分辨率，这使得它在向移动设备提供内容方面非常强大设备。

要指定仅用于打印的样式表，请使用@media print。有一个fairly good write-up on it at W3Schools。

在您的情况下，您可以使用打印媒体样式以及 :before 或 :after 仅在打印时向特定元素添加其他文本。

这样的事情会为你解决问题：

@media print {
    a[href='#foo'] { text-decoration:none;}
    a[href='#foo']:after { content: "[Ref: 1]";}
    a[name='foo']:before { content: "[1]";}
}

显然，您可以将内容中的文本更改为您喜欢的任何内容；我已尝试使其接近您的要求。

仍然会显示现有内容（不过我已经取消了下划线）。

希望对您有所帮助。

【讨论】：

而您需要一些脚本（例如 Javascript）来获得正确的动态页面引用，而不是始终使用“[1]”。除此之外，我肯定会选择@media print
谢谢，但如果我正确理解您的示例，页码已在文档中明确定义。我想参考网络浏览器（或打印机驱动程序）生成的真实页码，例如，如果 foo 恰好在第五个打印页面上，则目录应参考第 5 页。
@moontear：你能举一个这样的 javascript 的例子吗（如果需要，使用 jquery 或类似的）？请发布一个工作示例，我会接受您的回答。
对不起@约翰。您将无法找出您的网站实际上将在物理纸上打印多少页，因为这取决于您所说的打印机驱动程序（以及正在使用的打印机）。知道正在使用多少页的唯一方法是插入手动分页符（CSS 中的“page-break-after”）。看看@media print alistapart.com/articles/goingtoprint的A List Apart最佳实践@
@Johan - 是的，我在示例中设置了一个明确的参考编号。我想你可以把它看作是做脚注的一种方式。它尽可能接近回答你的问题。我没有找到参考所在页码的答案；我真的想不出如何解决这个问题。 Javascript不会这样做。 CSS：如果我遗漏了一些东西，你可能会尝试更多地研究@media，但我认为它不会做你想要的。没有将整个内容转换为 PDF，我看不到答案。

【解决方案2】：

我发现做我想做的事是不可能的。如果我错了，请纠正我！

【讨论】：