declarative-pdf/docs/examples/example-simple.html at master · productiveio/declarative-pdf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic Template</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      page-header,
      page-body,
      page-footer {
        padding: 20px;
      }

      .header {
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
      }

      .footer {
        text-align: center;
        border-top: 1px solid #ccc;
        padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <document-page format="a4">
      <page-header>
        <div class="header">
          <h1>Example</h1>
          <p>
            Created on:
            <script>
              document.write(new Date().toLocaleDateString());
            </script>
          </p>
        </div>
      </page-header>

      <page-body>
        <h2>Section 1</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac interdum lectus, in auctor felis. Aenean
          scelerisque dui id pellentesque congue. Etiam at nibh viverra, maximus erat quis, molestie felis. Integer sit
          amet malesuada dolor. Praesent laoreet, augue sed ornare malesuada, erat orci maximus dolor, ac placerat nunc
          magna a tortor. In at imperdiet lorem. Aenean non massa iaculis, tempor nulla et, condimentum velit. Fusce est
          mauris, consectetur ac semper non, euismod id quam. Duis eu purus enim. Vestibulum ultrices varius nisi id
          ultricies. Nullam posuere ex quis ipsum suscipit dignissim. Nam rhoncus lacinia eros quis placerat. Nullam
          neque dui, lacinia ut dapibus in, ornare eu massa. Curabitur varius neque accumsan dapibus ornare. In eu
          pellentesque justo. Sed turpis arcu, ultrices id quam nec, porttitor pulvinar massa.
        </p>
        <p>
          Donec interdum pellentesque justo nec rutrum. Nunc vel dignissim massa, ac consequat quam. Praesent quis
          accumsan quam. Nullam non eros mattis, facilisis metus sed, finibus erat. Donec venenatis sem eu erat
          convallis rhoncus. Vivamus quis diam a erat ultricies dapibus. Phasellus dictum lorem nisi, id ullamcorper
          nisl tristique sed. Nam eros dui, posuere dapibus pellentesque vel, auctor eget velit. Mauris sapien ligula,
          malesuada non lorem nec, semper fermentum eros. Praesent aliquet interdum quam vitae iaculis. Duis sit amet
          nisi varius, efficitur lectus egestas, elementum ligula. Donec consectetur sapien mi, feugiat tempor orci
          pharetra quis.
        </p>
        <p>
          Pellentesque vitae mauris consectetur, tempus massa malesuada, ornare dolor. Maecenas pharetra massa eu ante
          vulputate rhoncus. Aenean sit amet tincidunt nulla, in tempor nunc. Nullam tristique congue euismod. In hac
          habitasse platea dictumst. Vivamus sed ex bibendum, molestie nulla tincidunt, eleifend est. Ut aliquet nisl id
          nibh malesuada, sit amet consequat lorem fermentum. Curabitur pharetra venenatis nisi, ac vestibulum ante
          lobortis eu. Vestibulum et hendrerit lorem. Nunc sed risus quis eros malesuada aliquet quis molestie libero.
          Morbi ac ipsum sed risus dictum feugiat.
        </p>
        <p>
          Fusce arcu urna, cursus a tellus et, gravida dignissim odio. In velit diam, feugiat ut dapibus ornare, feugiat
          sed tortor. Aliquam feugiat, ligula eu fermentum ultricies, orci diam venenatis purus, vitae dignissim ipsum
          orci non est. Sed dolor ipsum, suscipit ut euismod ut, tincidunt id quam. Nam eget venenatis magna. Phasellus
          lectus leo, elementum vitae mi non, imperdiet tincidunt mauris. Aliquam erat volutpat. Suspendisse varius
          ullamcorper imperdiet. Nam ac neque a lectus vestibulum vestibulum.
        </p>
        <p>
          Morbi dapibus purus non nibh ultrices egestas. In faucibus viverra mattis. Curabitur eu condimentum dui. Sed
          ac iaculis tellus. Sed at est quam. Cras id blandit augue, id facilisis mauris. In tincidunt nunc convallis,
          sagittis nulla at, cursus purus. Aliquam a neque eleifend, mollis massa sit amet, vulputate orci. Sed sagittis
          sapien vestibulum rutrum congue. Maecenas tincidunt sem vel pretium sollicitudin. Integer semper volutpat
          velit at ultrices. Sed auctor eros suscipit nulla venenatis, elementum tempus velit tempus. In non nisi id
          lacus hendrerit finibus nec a felis. Maecenas bibendum turpis eget urna facilisis aliquam.
        </p>

        <h2>Section 2</h2>

        <p>
          Aliquam maximus odio lectus, nec dapibus ipsum efficitur ac. Nunc rutrum tellus in ornare scelerisque. Mauris
          ut iaculis ex. Phasellus elementum arcu nec ipsum placerat sagittis. Quisque et nulla libero. Donec tempus
          lacus eu felis ornare laoreet. In purus tortor, blandit vitae justo quis, molestie feugiat ipsum. Nunc
          venenatis ut nunc vitae feugiat. Morbi ut tellus laoreet, scelerisque ante vel, molestie dolor. Ut in enim id
          ipsum rutrum eleifend id nec leo.
        </p>
        <p>
          Maecenas vitae commodo mi. Morbi et suscipit purus, nec sollicitudin nibh. Nam dignissim tortor ac felis
          viverra dapibus. Praesent tempor dictum purus, consequat luctus est tempus dignissim. Aliquam erat volutpat.
          Etiam iaculis rhoncus nisi, non ultricies leo suscipit non. Ut quis enim nisl. Sed fringilla commodo urna et
          porta. Nam eget posuere tellus. Donec non risus id libero congue auctor. Morbi iaculis leo efficitur urna
          varius eleifend at at ipsum. Sed sollicitudin purus vitae nulla mattis, eu efficitur neque commodo. Integer
          magna magna, consequat vitae metus vitae, blandit fringilla justo. Etiam ornare accumsan diam id sollicitudin.
          Quisque ut neque sollicitudin, tristique enim ut, porttitor augue. Nullam placerat ornare ex, ut consectetur
          turpis.
        </p>
        <p>
          Vivamus eu est magna. Aliquam erat volutpat. Quisque nec maximus arcu, sit amet sollicitudin magna. Duis in
          arcu aliquam, euismod ligula nec, pharetra leo. Pellentesque vestibulum a nisl elementum bibendum. Nam purus
          tellus, mollis ut scelerisque vitae, pharetra eu massa. Quisque maximus dapibus ante non cursus. Quisque
          facilisis, mi eu porta pellentesque, leo quam rhoncus odio, in tempus dui magna ut est. Cras pulvinar, tortor
          ac rutrum dignissim, lorem justo consectetur felis, eget lacinia dui mauris quis arcu. Ut sit amet ultrices
          ligula, non vehicula neque. Vivamus et ex dignissim, venenatis metus vel, varius nunc. Vestibulum in lorem ut
          massa lacinia mattis eu in est. Pellentesque aliquet iaculis odio nec accumsan. Duis rutrum egestas est quis
          tristique. Nullam tristique ligula ante, at dignissim erat cursus in.
        </p>
        <p>
          Pellentesque eu laoreet arcu. Nulla sollicitudin cursus massa, eu tempus urna commodo sit amet. Vestibulum a
          condimentum ex. Integer tortor massa, pharetra rutrum imperdiet id, aliquet porttitor dolor. Morbi sodales
          viverra enim, eleifend vestibulum nisi tristique ut. Duis fringilla purus sed arcu ullamcorper, mattis
          ullamcorper lacus porta. Ut venenatis leo at tempus feugiat. Integer tincidunt ullamcorper massa vitae
          aliquam. Duis nec tristique est, eu faucibus mauris. Phasellus tincidunt commodo augue. In eu mauris dui. Cras
          augue ante, egestas ut felis a, posuere iaculis tortor. Praesent lacinia facilisis enim eget imperdiet.
          Quisque id interdum urna.
        </p>
        <p>
          Duis vitae risus venenatis, lacinia enim vel, scelerisque odio. Phasellus ut nibh vitae felis iaculis
          placerat. Nulla pellentesque quam magna, vel aliquam eros suscipit nec. Donec consequat tortor nisl, vel
          malesuada turpis congue consequat. Morbi tristique fermentum quam, sit amet condimentum purus tincidunt id.
          Duis bibendum nisi eget lacus pulvinar mollis. Nulla interdum libero sem, ut molestie justo congue eu. Aliquam
          vel libero in nisi tincidunt dignissim vel eu augue. Nulla rutrum diam eu feugiat eleifend. Class aptent
          taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec justo diam, blandit id
          suscipit eu, ultrices vel lorem. Nulla convallis est quis imperdiet scelerisque. Sed eleifend pellentesque
          sapien, eu lacinia ex venenatis vel.
        </p>
      </page-body>

      <page-footer>
        <div class="footer">
          Page <current-page-number>1</current-page-number> of <total-pages-number>1</total-pages-number>
        </div>
      </page-footer>
    </document-page>
  </body>
</html>