Paragon
Examples / R-demo-code-002

Demo with Header/Footer

Word RTL

Generate the Word 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.
-->
<script id="report-data" type="application/json">{{json}}</script>

    <template id="report-header">
      <header class="masthead">
        <div> <h1>شركة المثال للاستشارات</h1> <p class="subject">بيان الخدمات — الارتباط INS-4417</p> </div>
        <div class="issued"> صدر في <strong>31 يوليو 2026م</strong> — الحساب ACME-0092 </div>
      </header>
    </template>
    <template id="report-footer">
      <div class="pagefoot" dir="rtl"> <span class="mark">شركة المثال للاستشارات</span> <span>الارتباط INS-4417 &mdash; الحساب ACME-0092</span> <span>صفحة <span class="pageNumber"></span> من <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.