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>
<!--
What goes on every sheet. Both are empty here: this sheet is a reference document, so it wants
no running header and no page number.
The header, if it had one, would be placed in the page and styled by the CSS above. The footer
is drawn by the browser instead, which is the only way to print a page number:
Page <span class="pageNumber"></span> of <span class="totalPages"></span>
-->
<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.
assets/css/report.css