CODEWITHSUNDEEP
xmlxsltwkhtmltopdf
Ethan Brouwer
Ethan Brouwer

Reputation: 1005

XSLT and wkhtmltopdf TOC Applying Different Templates to Item at Different Depth

I'm trying to loop through items inside of items in the TOC outline generated by wkhtmltopdf and apply a different style to each one.

One thing I've tried is the following with 3 different templates:

<xsl:template match="outline:outline">
    <xsl:apply-templates select="outline:item/outline:item"/>
</xsl:template>

<xsl:template match="outline:item/outline:item">
    <xsl:if test="((@title!='') and (@title!='Table of Contents'))">
        <div style="width: 30%;">
            <h1> <xsl:value-of select="@title" /> </h1>
        </div>
        <div style="width: 70%;">
            <xsl:apply-templates select="outline:item"/>
        </div>
    </xsl:if>
</xsl:template>
<xsl:template match="outline:item/outline:item/outline:item">
    <h2> <xsl:value-of select="@title" /> </h2>
    <ul class="leaders">
        <xsl:apply-templates select="outline:item"/>
    </ul>
</xsl:template>
<xsl:template match="outline:item/outline:item/outline:item/outline:item">
    <li>
        <h3>
            <a>
                <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>
                <span> <xsl:value-of select="@title" /> </span>
                <span> <xsl:value-of select="@page" /> </span>
            </a>
        </h3>
    </li>
</xsl:template>

I've also tried applying the templates by mode, or other things. Another one that I've tried is using 3 <xsl:for-each> inside each other. As a reference, this is an example of the xml that's generated by wkhtmltopdf.

<?xml version="1.0" encoding="UTF-8"?>
<outline xmlns="http://wkhtmltopdf.org/outline">
    <item title="" page="0" link="" backLink=""/>
    <item title="" page="1" link="__WKANCHOR_0" backLink="__WKANCHOR_1">
        <item title="Table of Contents" page="3" link="__WKANCHOR_2" backLink="__WKANCHOR_3">
            <item title="H2 Test" page="3" link="test" backLink="test">
                <item title="H3 Test" page="3" link="test" backLink="test"/>
            </item>
        </item>
        <item title="Example Page 1" page="4" link="__WKANCHOR_4" backLink="__WKANCHOR_5"/>
        <item title="Example Page 2" page="5" link="__WKANCHOR_6" backLink="__WKANCHOR_7"/>
    </item>
</outline>

MY QUESTION: What's the right way to do this and get it to work with wkhtmltopdf? So far, with wkhtmltopdf I'm not getting any output for that part of the TOC page. With my own XSLT parser, I'm only getting the <h1> output and nothing else. How can I fix this?

EDIT

As per request, this is an example of the desired output. It's super simplified, and so is the above code, but in general this is kind of what I want it to look like, with proper fonts and other styling.

<html>
    <head>
        <style>
            body {
                margin: 0 1in;
            }
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
                overflow-x: hidden;
            }
            ul.leaders li:before {
                float: left;
                width: 0;
                white-space: nowrap;
                color: #003963;
                font-size: 1.6rem;
                content:
                        "........................................"
                        "........................................"
                        "........................................"
                        "........................................"
                        "........................................";
            }
            ul.leaders span:first-child {
                padding-right: 0.33em;
                background: white;
            }
            ul.leaders span + span {
                float: right;
                padding-left: 0.33em;
                background: white;
                position: relative;
                z-index: 10;
                font-size: 1rem;
            }
            ul.leaders span {
                margin-top: 0.5rem;
            }
            h1 {
                text-align: center;
                color: #96D1F2;
            }
            h2 {
                color: #F15A22;
            }
            h3 {
                color: #003963;
                text-transform: uppercase;
            }
        </style>
    </head>
    <body>
        <div>
            <div style="width: 30%; float: left; display: inline-block;">
                <h1>Big section</h1>
            </div>
            <div style="width: 70%; float: right; display: inline-block;">
                <h2>Sorta Big section</h2>
                <ul class="leaders">
                    <li>
                        <h3>
                            <span>Smaller Section</span>
                            <span>2</span>
                        </h3>
                    </li>
                    <li>
                        <h3>
                            <span>Smaller Section 2</span>
                            <span>3</span>
                        </h3>
                    </li>
                    <li>
                        <h3>
                            <span>Smaller Section 3</span>
                            <span>4</span>
                        </h3>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

EDIT 2: I've made the update suggested in the answer below and it fixed it for my parser in IntelliJ IDEA (my IDE), but it still has the same problem as it did in wkhtmltopdf where it just hangs once it hits the TOC stage.

Upvotes: 0

Views: 1274

Answers (1)

zx485
zx485

Reputation: 29052

You should change your xsl:if in the second template from

<xsl:if test="((@title!='') and (@title!='Table of Contents'))">

to

<xsl:if test="@title!=''">

Then your output changes to

<div style="width: 30%;">
    <h1>Table of Contents</h1>
</div>
<div style="width: 70%;">
    <h2 xmlns:outline="http://wkhtmltopdf.org/outline">H2 Test</h2>
    <ul xmlns:outline="http://wkhtmltopdf.org/outline" class="leaders">
        <li>
            <h3>
                <a href="test" name="test">
                    <span>H3 Test</span>
                    <span>3</span>
                </a>
            </h3>
        </li>
    </ul>
</div>
<div style="width: 30%;">
    <h1>Example Page 1</h1>
</div>
<div style="width: 70%;"/>
<div style="width: 30%;">
    <h1>Example Page 2</h1>
</div>
<div style="width: 70%;"/>

which is pretty close to the desired outcome.
I couldn't improve the templates further, because your desired outcome differs too extensive. But I guess that you now can get along.

Upvotes: 1

Related Questions