В этой главе будет рассмотрен пример быстрого развертывания Stimulsoft в приложениях pure JavaScript. Такое приложение состоит из HTML страницы и JS скриптов.

 

 

Создайте index.html файл

Это может быть любой html файл, но по умолчанию точкой входа считается index.html.

 

index.html

 

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

</head>

<body>

 

</body>

</html>

 

 

 

Установите компоненты Stimulsoft
Для начала необходимо скачать пакет Stimulsoft. Если необходимы только инструменты отчетности, то следует скачать пакет Stimulsoft Reports.JS. Если же требуются и средства отчетности и дашборды, то пакет Stimulsoft Dashboards.JS. Затем, следует подключить скрипты Stimulsoft в файле index.html.

 

index.html

...

<script type="text/javascript" src="scripts/stimulsoft.reports.js"></script>

<script type="text/javascript" src="scripts/stimulsoft.dashboards.js"></script>

<script type="text/javascript" src="scripts/stimulsoft.designer.js"></script>

<script type="text/javascript" src="scripts/stimulsoft.viewer.js"></script>

<script type="text/javascript" src="scripts/stimulsoft.blockly.editor.js"></script>

...

 

 

Создайте функцию запуска
Например, функция вызова дизайнера отчетов с пустым отчетом.

 

index.html

...

<script type="text/javascript">

function onLoad() {

var report = new Stimulsoft.Report.StiReport();

 

var designer = new Stimulsoft.Designer.StiDesigner();

designer.renderHtml('content');

designer.report = report;

}

</script>

 

...

 

<body onload="onLoad()">

<div id="content"></div>

</body>

...

 

 

Или, функция вызова вьювера отчетов с ранее созданным шаблоном отчета.

 

index.html

...

<script type="text/javascript">

function onLoad() {

var report = new Stimulsoft.Report.StiReport();

report.loadFile('reports/Report.mrt');

 

var viewer = new Stimulsoft.Viewer.StiViewer();

viewer.renderHtml('content');

viewer.report = report;

}

</script>

 

...

 

<body onload="onLoad()">

<div id="content"></div>

</body>

...

 

 

Первый запуск

По умолчанию, браузер не имеет доступа к файловой системе. Это обусловлено политикой безопасности браузеров. Для того, чтобы локальный проект запускался корректно, следует использовать различные веб-серверы. Например, можно установить глобально http-server или serve, и затем запустить веб-сервер из командной строки в корневой папке проекта. В этом случае, index.html будет открыт в бразузере, с дизайнером или вьювером Stimulsoft.