Генератор отчетов Stimulsoft Reports.JS – это универсальный инструмент для разработки отчетов, он может использовать любой Web-сервер и работать на любой платформе. Сегодня мы рассмотрим пример интеграции Reports.JS с использованием популярного веб-фреймворка Django, написанного на языке программирования Python.
views.py:
Всё готово! Запускаем проект при помощи Visual Studio Code или через консоль операционной системы, используя команду "python manage.py runserver". После запуска открываем в браузере URL приложения, и переходим на созданное нами представление: http://127.0.0.1:8000/viewer.
Если всё сделано правильно, отобразится вьювер с загруженным отчетом.
Готовые примеры находятся в репозитории на GitHub по ссылке.
Процесс интеграции. Подготовительный этап.
Для начала убедитесь, что у вас установлена свежая версия интерпретатора Python 3, и корректно настроены переменные окружения для него. Для создания проекта будем использовать среду разработки Visual Studio Code. Если у вас еще нет готового веб-приложения с использованием Django, необходимо его создать. Подробно про это можно прочитать в документации по этой ссылке.Шаблоны страницы
Для интеграции вьювера (или дизайнера) отчетов потребуется создать новый шаблон страницы. Шаблоны представляют собой HTML страницы, расположенные в папке "templates". Назовём новый файл шаблона "viewer.html" и добавим в него весь необходимый код загрузки и отображения компонента:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Showing a Report in the Viewer</title>
<!-- Stimulsoft Reports.JS -->
{% load static %}
<script src="/{% static 'scripts/stimulsoft.reports.js' %}" type="text/javascript"></script>
<script src="/{% static 'scripts/stimulsoft.viewer.js' %}" type="text/javascript"></script>
<!-- Report viewer scripts, may be external -->
<script type="text/javascript">
// Create the report viewer with default options
var viewer = new Stimulsoft.Viewer.StiViewer(null, "StiViewer", false);
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report from url
report.loadFile("{% static 'reports/SimpleList.mrt' %}");
// Assign report to the viewer, the report will be built automatically after rendering the viewer
viewer.report = report;
</script>
</head>
<body>
<div>
<script type="text/javascript">
// Show the report viewer in this block
viewer.renderHtml();
</script>
</div>
</body>
</html>
Обработчики представлений и ссылок
Следующим шагом нужно добавить функцию вызова созданного шаблона в обработчик представлений "views.py" и определить ссылку для вызова функции в обработчик ссылок "urls.py".views.py:
def viewer(request):
return render(request, 'viewer.html')
urlpatterns = [
path("", views.home, name="home"),
path("viewer", views.viewer, name="viewer"),
]
Статические файлы
В коде представления используются статические файлы – скрипты компонентов и отчеты. Создадим две директории для них в папке "static" контента веб-приложения, назовем эти папки "scripts" и "reports". В папку "scripts" копируем все ".js" файлы продукта Stimulsoft Reports.JS, а в папку "reports" копируем необходимые отчеты. В примере шаблона используется отчет с названием "SimpleList.mrt".Всё готово! Запускаем проект при помощи Visual Studio Code или через консоль операционной системы, используя команду "python manage.py runserver". После запуска открываем в браузере URL приложения, и переходим на созданное нами представление: http://127.0.0.1:8000/viewer.
Если всё сделано правильно, отобразится вьювер с загруженным отчетом.
Готовые примеры находятся в репозитории на GitHub по ссылке.
Если у вас остались вопросы, свяжитесь с нами.