使用 wkhtmltopdf 时如何在不显示 <h*> 标签的情况下将文档分成几个部分？

Question

我正在使用 wkhtmltopdf 实现目录。

为了生成 table 的内容，我必须将标签放在文档中，如 documentation:

中所述

The table of content is generated based on the H tags in the input documents. First a XML document is generated, then it is converted to HTML using XSLT.

出于产品设计的原因，我需要这样做，以便在最终的 PDF 中既不显示也不显示这些字符串 space。

我尝试使用绝对定位并使用 "transparent" 颜色来隐藏文本，但有时效果不佳，因为 wkhtmltopdf 将它们排除在目录之外。我猜是 webkit 引擎优化了它们。

是否有可能以某种方式 "tag" 内容而不是包含实际的 HTML 标签？

谢谢

Answer 1

我实际上成功地使用了隐藏 <h*>。但是绝对定位对我也不起作用。这是我的隐藏大纲标题样式：

width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: 0 -1px -1px 0 !important;
overflow: hidden !important;
opacity: 0 !important;

诀窍是让标题具有实际大小 (1x1 px)，用不透明度隐藏它们并避免它们采用 1px space 和负边距。

Is it possible to somehow "tag" the content instead of including the actual HTML tags?

我不这么认为。

Answer 2

好的，经过多次尝试和测试，我可能找到了解决这个问题的方法。

用 H 标签标记您的部分。例如：

<h1 class="section-marker">Section title</h1>
[... content]
<h2 class="section-marker">Sub-Section title</h2>
[... content]
<h3 class="section-marker">Sub-Sub-Section title</h3>
[... content]

要确保此类标签不可见且不占用任何 space（并且 wkhtmltopdf 仍会捕获它们），您可以使用这些 CSS 规则：

.section-marker {
    width: 2px !important;
    height: 2px !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    font-size: 1px;
    float: left;
}

更新：低于我原来的答案，这是次优的。经过一些测试后，我将@lorenzo-s css 解决方案改编为一个应该始终有效的 "universal" 版本（@lorenzo-s 的解决方案在我的情况下不起作用）并且不需要任何 "section-separator".

要确保此类标签不可见且不占用任何 space（并且 wkhtmltopdf 仍会捕获它们），您可以使用这些 CSS 规则：

.section-marker {
    font-size: 0;
    color: transparent;
    float: left;
  }

不过我注意到一个小问题。如果 2 个 H 标签相邻，wkhtmltopdf 无法将它们识别为单独的标记（可能是因为浮动属性，我不确定）。

这样的东西将无法正常工作：

<h1 class="section-marker">Section title</h1>
<h2 class="section-marker">Sub-Section title</h2>

你需要改成这样：

<h1 class="section-marker">Section title</h1>
<br class="section-separator">
<h2 class="section-marker">Sub-Section title</h2>

这些规则（我从 this answer 和一些 trial/error 尝试中得出）：

br.section-separator {
  content:' ';
  display: block;
  margin-top: 2px;
  line-height:2px;
}

使用 wkhtmltopdf 时如何在不显示 <h*> 标签的情况下将文档分成几个部分？

How to divide a document in sections without showing the <h*> tags when using wkhtmltopdf?

html

css

pdf

webkit

wkhtmltopdf