YetiForceCompany/YetiForcePDF

View on GitHub
examples/PagesTables.html

Summary

Maintainability
Test Coverage
<div data-font data-family="Pacifico" data-weight="bold" data-style="normal"
     data-file="D:\www\YetiForcePDF\lib\Fonts\Pacifico\Pacifico-Regular.ttf"></div>
<div data-font data-family="Lobster Two" data-weight="400" data-style="normal"
     data-file="D:\www\YetiForcePDF\lib\Fonts\NotoSans-Condensed.ttf"></div>
<div data-font data-family="Lobster Two" data-weight="400" data-style="thin"
     data-file="D:\www\YetiForcePDF\lib\Fonts\Lobster_Two\LobsterTwo-Regular.ttf"></div>
<div data-font data-family="Lobster Two" data-weight="400" data-style="italic"
     data-file="D:\www\YetiForcePDF\lib\Fonts\Lobster_Two\LobsterTwo-Italic.ttf"></div>
<div data-font data-family="Lobster Two" data-weight="bold" data-style="normal"
     data-file="D:\www\YetiForcePDF\lib\Fonts\Lobster_Two\LobsterTwo-Bold.ttf"></div>
<div data-font data-family="Lobster Two" data-weight="bold" data-style="italic"
     data-file="D:\www\YetiForcePDF\lib\Fonts\Lobster_Two\LobsterTwo-BoldItalic.ttf"></div>

<div data-header>
    <table style="border:1px solid greenyellow;font-size:12px;margin:10px;background-color:yellow;width:100%">
        <tr>
            <td style="width:50%;border:1px solid red;font-family:'Lobster Two';font-weight:thin;">This is a page
                header
            </td>
            <td style="text-align:right;border:1px solid red;">chrząszcz brzmi w czcinie</td>
        </tr>
    </table>
</div>
<div data-footer>
    <div style="border:1px solid greenyellow;font-size:14px;margin:10px;">
        <div style="text-align:center">Footer</div>
    </div>
</div>
<div data-watermark style="text-align:center;">
    <div style="display:inline-block;font-size:20px;opacity:0.25;">
        <img src="https://images.pexels.com/photos/459654/pexels-photo-459654.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=400">
    </div>
</div>

<table style="border:1px solid greenyellow;font-size:12px;margin:10px;background-color:yellow;width:100%">
    <tr>
        <td style="width:50%;border:1px solid red;">This is a page header</td>
        <td style="text-align:right;border:1px solid red;">chrząszcz brzmi w czcinie</td>
    </tr>
</table>
<table style="border:1px solid greenyellow;font-size:12px;margin:10px;background-color:yellow;width:100%">
    <tr>
        <td style="width:50%;border:1px solid red;">This is a page header</td>
        <td style="text-align:right;width:50%;border:1px solid red;">chrząszcz brzmi w czcinie</td>
    </tr>
</table>

<div style="font-size:24px;font-family:'Pacifico';font-weight:100;border:1px solid red;">Customowe czcionki już
    działają!
</div>
<div style="font-family:'Lobster Two';font-weight:bold;font-style:italic;font-size:40px;text-align:center;">A oto
    następna czcionka
    własna!
</div>

<div style="border:1px solid green;padding:20px;">
    This is the wrapper of the wrapper of page breaking element that should not be copied
    <div style="border:1px solid orange;">
        This should not be copied
        <div style="page-break-after:always;"></div>
    </div>
</div>

<table style="border:1px solid green;border-collapse:separate;">
    <thead>
    <tr style="background-color:yellow">
        <th style="border:1px solid red;">0 header1</th>
        <th style="border:1px solid red;">header2</th>
        <th style="border:1px solid red;">header3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td style="border:1px solid red;">1 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">2 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">3 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">4 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">5 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">6 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">7 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">8 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">9 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">10 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">11 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">12 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">13 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">14 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">15 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">16 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">17 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">18 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">19 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">20 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">21 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">22 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">23 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">24 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">25 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">26 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">27 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">28 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">29 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">30 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">31 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">32 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">33 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">34 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">35 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">36 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">37 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    <tr>
        <td style="border:1px solid red;">38 test1</td>
        <td style="border:1px solid red;">test2</td>
        <td style="border:1px solid red;">test3</td>
    </tr>
    </tbody>
    <tfoot>
    <tr style="background-color:yellow">
        <th style="border:1px solid red;">39 footer1</th>
        <th style="border:1px solid red;">footer2</th>
        <th style="border:1px solid red;">footer3</th>
    </tr>
    </tfoot>
</table>

<div style="font-size:24px;border:1px solid red;">This is the brand new page with number 2.</div>
<div style="page-break-after:always;"></div>
<div style="font-size:24px;border:1px solid red;">This is the brand new page with number 3.</div>