How to add repeating table headers with pdftronprivate.PTConvert.ConvertHTMLStringToPDF(). Xamarin ios

Technical Support
, , , ,
1

Product: PDFTron sdk for Xamrin iOS

Product Version:PDFTron iOS - 9.0.0

Please give a brief summary of your issue:
I want to get repeating table headers in the converted pdf using the HTML string. And I want to add a footer as well. I am new to pdftron library and grateful if you can guide me here.

Thanks and regards,

Sample Html string is as follows;

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>This step contains a repeating section</title>
    <style type="text/css">
        body {
            color: dimgray;
            font-family: Helvetica;
        }

        .container {
            width: auto;
            height: auto;
            margin: auto;
            padding: 16px;
            font-family: arial;
            position: relative;
            font-size: 14px;
        }

        h1 {
            font-size: 24px;
            margin-top: 5px;
            padding-bottom: 10px;
            text-align: center;
        }

        h2 {
            font-weight: 700;
            font-size: 12px;
            padding: 10px;
            margin-bottom: 0px;
            color: black;
            background-color: #E8E8E8;
            background-size: contain;
            border: 1px solid #E8E8E8;
        }

        table {
            border-top: none;
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            text-align: center;
            color: black;
            padding: 10px;
            overflow: hidden;
        }

        th {
            border-top: none;
            padding: 10px;
            overflow: hidden;
            color: black;
        }

        .div-listtable {
            border-top: 1px solid #E8E8E8;
            border-right: 1px solid #E8E8E8;
            border-left: 1px solid #E8E8E8;
        }

        .listtable {
            table-layout: fixed;
            border-top: none;
        }

            .listtable td {
                font-weight: normal;
                font-size: 10px;
                font-style: normal;
                text-align: left;
                border-bottom: 1px solid #E8E8E8;
            }

            .listtable th {
                font-weight: normal;
                font-size: 10px;
                border-top: none;
                border-bottom: 1px solid #E8E8E8;
                text-align: left;
                color: #535C61;
            }

        .div-formtable {
            border-top: none;
            border: 1px solid #E8E8E8;
        }

        .formtable {
            border-top: none;
            table-layout: fixed;
        }

            .formtable td {
                color: #2B363C;
                font-size: 10px;
                font-style: normal;
                text-align: left;
                vertical-align: top;
            }

            .formtable th {
                font-size: 10px;
                color: #535C61;
                text-align: left;
            }

        .markdown {
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }

            .markdown p {
                /*
                The markdown to HTML library nests everything within a <p> tag which the browsers add a default margin to.
                We should remove that
            */
                margin: 0;
            }

        .badge {
            font-family: 'Open Sans';
            display: inline-block;
            padding: 10px;
            text-align: center;
            border-radius: 5px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>This step contains a repeating section</h1><td style="vertical-align: top;"><h2>Purchase Order Main</h2><div class="div-formtable"><table class="formtable"><tr><td colspan="2"><span class="fieldheader">Order No</span><br>1</td><td colspan="2"><span class="fieldheader">Description</span><br>Test purchase order</td></tr><tr><td colspan="2"><span class="fieldheader">Purchaser</span><br>ALAIN</td></table></div><br></td><div class="markdown" color:#123F33; background-color:#3DD2AA;"><p>1-1 Engine (1)</p>
</div><div style='padding: 10px; border: 1px solid #E8E8E8'><header><b>Step Header</b></header><p>Test paragraph goes here... Test paragraph goes here... Test paragraph goes here... Test paragraph goes here...<div style='text-indent: 5%'><b>Indent 1</b> Indent 1... Indent 1... Indent 1... Indent 1... Indent 1... Indent 1... </div><br><div style='text-indent: 10%'><b>Indent 2</b> Indent 2... Indent 2... Indent 2... Indent 2... Indent 2... Indent 2... </div><br><div style='text-indent: 15%'><b>Indent 3</b> Indent 3... Indent 3... Indent 3... Indent 3... Indent 3... Indent 3... </div><br>Test paragraph goes here... Test paragraph goes here... Test paragraph goes here... Test paragraph goes here...<br><br><span style='color: red'>Warning!</span> Warning message... Warning message... <br><br><span style='color: blue'>Info!</span> Info message... Info message... <br><br><span style='color: green'>Success!</span> Success message... Success message...<br><br><p>Variable Test: <ul><li>Order Number: 1</li><li>Line Number: 1</li><li>Item ID: Engine</li><li>Quantity: 1</li></ul></div><h2>Purchase Order Serials List</h2><div class="div-listtable"><table class="listtable"><tr><th></th><th>Order No</th><th>Line No</th></tr><tr><td class="fieldheader">EN001</td><td>1</td><td>1</td></tr></table></div><div class="markdown" color:#123F33; background-color:#3DD2AA;"><p>1-2 Wheels (4)</p>
</div><div style='padding: 10px; border: 1px solid #E8E8E8'><header><b>Step Header</b></header><p>Test paragraph goes here... Test paragraph goes here... Test paragraph goes here... Test paragraph goes here...<div style='text-indent: 5%'><b>Indent 1</b> Indent 1... Indent 1... Indent 1... Indent 1... Indent 1... Indent 1... </div><br><div style='text-indent: 10%'><b>Indent 2</b> Indent 2... Indent 2... Indent 2... Indent 2... Indent 2... Indent 2... </div><br><div style='text-indent: 15%'><b>Indent 3</b> Indent 3... Indent 3... Indent 3... Indent 3... Indent 3... Indent 3... </div><br>Test paragraph goes here... Test paragraph goes here... Test paragraph goes here... Test paragraph goes here...<br><br><span style='color: red'>Warning!</span> Warning message... Warning message... <br><br><span style='color: blue'>Info!</span> Info message... Info message... <br><br><span style='color: green'>Success!</span> Success message... Success message...<br><br><p>Variable Test: <ul><li>Order Number: 1</li><li>Line Number: 2</li><li>Item ID: Wheels</li><li>Quantity: 4</li></ul></div><h2>Purchase Order Serials List</h2><div class="div-listtable"><table class="listtable"><tr><th></th><th>Order No</th><th>Line No</th></tr><tr><td class="fieldheader">WH001</td><td>1</td><td>2</td></tr><tr><td class="fieldheader">WH002</td><td>1</td><td>2</td></tr><tr><td class="fieldheader">WH003</td><td>1</td><td>2</td></tr><tr><td class="fieldheader">WH004</td><td>1</td><td>2</td></tr></table></div><div class="markdown" color:#123F33; background-color:#3DD2AA;"><p>1-3 Seats (2)</p>
</div><div style='padding: 10px; border: 1px solid #E8E8E8'><header><b>Step Header</b></header><p>Test paragraph goes here... Test paragraph goes here... Test paragraph goes here... Test paragraph goes here...<div style='text-indent: 5%'><b>Indent 1</b> Indent 1... Indent 1... Indent 1... Indent 1... Indent 1... Indent 1... </div><br><div style='text-indent: 10%'><b>Indent 2</b> Indent 2... Indent 2... Indent 2... Indent 2... Indent 2... Indent 2... </div><br><div style='text-indent: 15%'><b>Indent 3</b> Indent 3... Indent 3... Indent 3... Indent 3... Indent 3... Indent 3... </div><br>Test paragraph goes here... Test paragraph goes here... Test paragraph goes here... Test paragraph goes here...<br><br><span style='color: red'>Warning!</span> Warning message... Warning message... <br><br><span style='color: blue'>Info!</span> Info message... Info message... <br><br><span style='color: green'>Success!</span> Success message... Success message...<br><br><p>Variable Test: <ul><li>Order Number: 1</li><li>Line Number: 3</li><li>Item ID: Seats</li><li>Quantity: 2</li></ul></div><h2>Purchase Order Serials List</h2><div class="div-listtable"><table class="listtable"><tr><th></th><th>Order No</th><th>Line No</th></tr><tr><td class="fieldheader">SE001</td><td>1</td><td>3</td></tr><tr style="background-color: #360065; color: #FAFAFA;"><td class="fieldheader">SE002</td><td>1</td><td>3</td></tr></table></div>
    </div>
</body>
</html>
2

Hi @dhanushka.premasingh,

Apologies for the delay in reply.

In this case the html-to-pdf conversion is being performed by Apple’s WKWebView component, so support for repeating table headers and a footer is something that would need to be implemented by WebKit rather than PDFTron.

3

Thank you for the reply @Jamie_Dassoulas. :blush: Do you have any guides for how I can achieve this? Really appreciate your help.

4

Hi @dhanushka.premasingh,

Sorry for not being clear in my earlier message.
Unfortunately I don’t have any guidance for you in this regard as this is outside of the scope of the PDFTron SDK but would instead need to be supported by Apple’s WKWebView.