Paragon
Examples / R-demo-code-006

Demo Invoice

Pdf LTR

Generate the Pdf How a template is put together

The template

This is the whole thing — an HTML page with {{ }} bindings. Nothing is generated from a designer format; what you see here is what the engine renders.

template.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Stylesheets, scripts and fonts go here. Every page of this report gets them. -->
    <link rel="stylesheet" href="assets/css/report.css">
  </head>
  <body>

<!--
    The report's data, as JSON, for chart and script code to read:

        const model = JSON.parse(document.getElementById('report-data').textContent);

    Here rather than in a page because the data belongs to the report: this file is merged into
    every page, so writing it once puts a copy in each. This invoice draws nothing in script, but
    the island stays: it costs a line, and it is the sanctioned route the moment one is needed.
-->
<script id="report-data" type="application/json">{{json}}</script>

<!--
    The masthead. Fixed to the top of every sheet by the engine, so a long invoice carries it onto
    the second sheet without the page having to repeat it. This file says what it holds; the
    stylesheet says what it looks like and .sheet's top padding reserves the band it draws into.
-->
    <template id="report-header">
      <header class="masthead">
        <div class="issuer">
          <h1>{{seller.name}}</h1>
          <p>{{seller.tagline}}</p>
        </div>
        <div class="docref">
          <span class="doctype">Invoice</span>
          <span class="docno">{{invoice.number}}</span>
        </div>
      </header>
    </template>

<!--
    The footer is drawn by the browser rather than placed in the page, because it is the only way
    to print a page number. It is styled from this report's stylesheet, but it will not paint a
    background or draw an image — so it is text, and the logo stays in the masthead above.
-->
    <template id="report-footer">
      <div class="pagefoot">
        <span class="mark">{{seller.name}}</span>
        <span>{{invoice.number}} &mdash; account {{customer.account}}</span>
        <span>Page <span class="pageNumber"></span> of <span class="totalPages"></span></span>
      </div>
    </template>
  </body>
</html>

What it carries

Stylesheets, scripts, images and fonts travel inside the report, so nothing is resolved from the outside while it renders.