Чистый JavaScript
В этой главе будет рассмотрен пример быстрого развертывания Stimulsoft в приложениях pure JavaScript с подл.чением файлов скриптов через CDN сервисы. Такое приложение состоит из 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
На данный момент, можно использовать следующие сервисы:
При помощи этих сервисов можно получить доступ к файлам скриптов по URL из npm пакетов stimulsoft-reports-js и stimulsoft-dashboards-js . Таким образом, можно подключить файлы скриптов по URL в файле index.html. Например, при помощи сервиса cdn.jsdelivr.net:
index.html |
... <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.reports.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.designer.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.blockly.editor.js"></script> ... |
или, при использовании сервиса unpkg.com:
index.html |
... <script type="text/javascript" src="https://www.unpkg.com/stimulsoft-dashboards-js/Scripts/stimulsoft.reports.js"></script> <script type="text/javascript" src="https://www.unpkg.com/stimulsoft-dashboards-js/Scripts/stimulsoft.dashboards.js"></script> <script type="text/javascript" src="https://www.unpkg.com/stimulsoft-dashboards-js/Scripts/stimulsoft.designer.js"></script> <script type="text/javascript" src="https://www.unpkg.com/stimulsoft-dashboards-js/Scripts/stimulsoft.viewer.js"></script> <script type="text/javascript" src="https://www.unpkg.com/stimulsoft-dashboards-js/Scripts/stimulsoft.blockly.editor.js"></script> ... |
Информация |
Обратите внимание, при помощи сервисов cdn.jsdelivr.net и unpkg.com можно подключить различные скрипты, которые поставляются в пакетах stimulsoft-reports-js и stimulsoft-dashboards-js. Также можно подключить файлы скриптов определенной версии npm пакета, указав ее в URL через символ @. Например, https://cdn.jsdelivr.net/npm/stimulsoft-reports-js@2024.4.1/Scripts/stimulsoft.reports.js или https://www.unpkg.com/stimulsoft-reports-js@2024.4.1/Scripts/stimulsoft.reports.js.
Если же версия пакета в URL не будет указана, то файлы скриптов будут загружены из последней доступной версии пакета stimulsoft-reports-js или stimulsoft-dashboards-js
|
Создайте функцию запуска
Например, функция вызова дизайнера отчетов с пустым отчетом.
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.