Paragon
Examples / R-demo-code-004

Demo Charts - Library

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. -->

<!-- The typeface first: the styles below name it, and the charts measure their labels in it. -->
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/report.css">

<!--
    amCharts 5.14.4, built from that exact npm release into the browser globals its own
    documentation uses — am5, am5xy, am5percent and am5radar. It is carried in the report rather
    than fetched from the cdn because a render only ever sees this folder: every other host is
    blocked, so a cdn tag would draw in the designer and be missing from the document.

    The Animated theme is not here on purpose. See assets/js/charts.js.
-->
<script src="assets/js/vendor/amcharts5-5.14.4.js"></script>
<script src="assets/js/charts.js"></script>
</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>


<!--
    What goes on every sheet. Leave either empty for none, and leave room for them in the
    page's own padding — neither reserves space, they draw over the content.

    The header is placed in the page, fixed to the top of the sheet, so this file's CSS
    styles it and the designer's preview shows it exactly as it will print.

    The footer is drawn by the browser instead, because it is the only way to print the
    page number, which no stylesheet can know:
        Page <span class="pageNumber"></span> of <span class="totalPages"></span>
    That makes it a little document of its own, but it is still styled from the report's
    stylesheets — they are read and sent with it. What cannot follow is anything fetched:
    no background images and no webfonts in the footer.
-->
<template id="report-header"></template>
<template id="report-footer"></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.