Question

有没有办法打印带有超链接的目标页码，这些超链接链接到同一文档中的不同位置？

<h1>Table of Contents</h1>
<ul>
    <li><a href="#introduction">Introduction</a></li>
</ul>

...

<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
    <h1>Introduction</h1>
    ...
</section>

这样输出就像：

Table of Contents (page 0)

Introduction.........................3


...


Introduction (page 3)

打印到PDF（在OS X上）时，我只需要将其与Google Chrome浏览器配合使用。

是否有一些CSS或JavaScript技巧可以让我实现这个目标？

Answer 1

我不知道这是否适用于PDF，但回答了如何在CSS中完成此操作的问题：

您可以使用counter-increment在css：

中的伪元素上生成数字

请注意，我将<ul>更改为<ol>，因为这是一个有序列表，无论您是否使用list-style。

ol {
    counter-reset: list-counter;
}
li:after {
    counter-increment: list-counter;
    content: counter(list-counter);
    float: right;
}

在文本和数字之间做一点虚线需要更多的工作，但是你可以通过添加一些额外的span元素并使用css display: table;和{{1}来实现这一点。正确地布置它们：

display: table-cell;

<ol>
    <li><span>Test</span><span class="line"></span></li>
    <li><span>Test2</span><span class="line"></span></li>
    <li><span>Test3</span><span class="line"></span></li>
</ol>

在li { display: table; } li span, li:after { display: table-cell; vertical-align: bottom; } li span.line { border-bottom: 1px dotted #000; width: 100%; }元素上将宽度设置为100％，而不设置任何宽度会强制它填充所有剩余空间（这是由于span.line显示元素不允许打破新行，防止内容溢出）

See full demo

这不是必须添加额外table-cell元素的最干净方法，但这是一项棘手的任务。也许其他人可以花时间想一个更有效的方法来实现它？您可以随时在整个span下面加下划线，并跳过额外的标记，但代价是不那么酷。

Answer 2

看起来这是CSS规范新工作草案的一部分：

http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references

我怀疑还有任何浏览器支持......

在Chrome中使用CSS打印目录的页码

2 个答案:

See full demo