wkhtmltopdf - How can "Leader Dots" be added between page links and numbers in Table of Contents of PDF - Stac

admin•2025-04-22 11:12:50•questions•阅读1

I want to generate Table of Contents(TOC) in PDF as like the fllowing format.I want to put leader dots

I want to generate Table of Contents(TOC) in PDF as like the fllowing format. I want to put leader dots dynamically fill up the space between links and numbers in the same line without wrapping any elements to next line:

Table of Contents
Introduction .......................................... 1
Chapter 1 ............................................. 2
Chapter 2 ............................................. 3

I've read their documentation here: .txt

The Deafult TOC XSL style shows border-bottom : dashed under entire heading line like:

I also tried to dump and modify the default XSL sheet as follows: But it was not displayed properly in PDF.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
                xmlns:xsl=""
                xmlns:outline=""
                xmlns="">
  <xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
              doctype-system=".dtd"
              indent="yes" />
  <xsl:template match="outline:outline">
    <html>
      <head>
        <title>Table of Contents</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
          h1 {
          text-align: center;
          font-size: 20px;
          font-family: arial;
          }
          <!-- I hide the border-bottom -->
          <!-- div {border-bottom: 1px dashed rgb(200,200,200);} -->
          span {float: right;}
          li {list-style: none;}
          ul {
          font-size: 20px;
          font-family: arial;
          }
          ul ul {font-size: 80%; }
          ul {padding-left: 0em;}
          ul ul {padding-left: 1em;}
          a {text-decoration:none; color: black;}
        </style>
        
        <!-- Here is My CUSTOMIZE CSS Code -->
        <style>
          .toc-entry {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: nowrap;
          }
          
          .toc-link {
          white-space: nowrap;
          }
          
          .dot {
          display: inline-block;
          flex-grow: 1;
          border-bottom: 1px dotted blue;
          margin-left: 5px;
          margin-right: 5px;
          }
        </style>
        
        
      </head>
      <body>
        <h1>Table of Contents</h1>
        <ul><xsl:apply-templates select="outline:item/outline:item"/></ul>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="outline:item">
    <li>
      <xsl:if test="@title!=''">
        <div class="toc-entry">
          <a class="toc-link">
            <xsl:if test="@link">
              <xsl:attribute name="href"><xsl:value-of select="@link"/></xsl:attribute>
            </xsl:if>
            <xsl:if test="@backLink">
              <xsl:attribute name="name"><xsl:value-of select="@backLink"/></xsl:attribute>
            </xsl:if>
            <xsl:value-of select="@title" /> 
          </a>
          <span class="dot"></span>
          <span> <xsl:value-of select="@page" /> </span>
        </div>
      </xsl:if>
      <ul>
        <xsl:comment>added to prevent self-closing tags in QtXmlPatterns</xsl:comment>
        <xsl:apply-templates select="outline:item"/>
      </ul>
    </li>
  </xsl:template>
</xsl:stylesheet>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745276288a4620061.html