Stimulsoft Reports.JS – это мощный инструмент для создания и отображения отчетов в веб-приложениях, основанных на платформах Vue.js, React.js, Node.js и других. В этой статье мы познакомим вас с использованием нашего генератора отчетов для JavaScript в проектах и приложениях, основанных на фреймворке Express для Node.js, покажем пошаговую инструкцию работы и предоставим несколько сэмплов для начала работы.
Шаг 1. Настройка проекта
Для начала работы необходимо или создать новый Express.js-проект, или использовать уже созданный. Установите необходимые зависимости при запуске следующей команды в директории вашего проекта:npm install stimulsoft-reports-js expressШаг 2. Конфигурация Express.js-сервера
Далее следует создать новый файл в вашем Node.js-проекте, например,server.js и импортировать нужные модули:
const express = require('express');
const app = express();
const port = 3000; // - any port.
viewer.html:
app.get('/viewer', (req, res) => {
res.sendFile(__dirname + '/viewer.html');
});
app.get('/stimulsoft.reports.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.reports.js");
});
app.get('/stimulsoft.viewer.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js");
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Шаг 3. Создание страницы вьювера
В директории проекта создаём новый HTML-файл и добавляем в него следующий код, чтобы включить необходимые библиотеки Stimulsoft Reports.JS и инициализировать вьювер:<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Viewer</title>
<script src="/stimulsoft.reports.js"></script>
<script src="/stimulsoft.viewer.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var options = new Stimulsoft.Viewer.StiViewerOptions();
var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml("viewer");
</script>
</body>
</html>Шаг 4. Создание шаблона отчета
Создаём новый файл в директории, например,SampleReport.mrt. Используйте Stimulsoft Designer для создания отчета и сохраните его как SampleReport.mrt. Шаг 5. Отображение отчета во вьювере
Далее настроим route для загрузки шаблона отчета и передаем его вьюверу:app.get('/report', (req, res) => {
res.sendFile(__dirname + '/SampleReport.mrt');
});
viewer.html:
var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
viewer.report = report;
Шаг 6. Запуск проекта
Запускаем проект с помощьюnode server.js и переходим на http://localhost:3000/reports в браузере для просмотра страницы. После того, как шаблон добавлен в проект, отчет отобразится во вьювере.Дизайнер отчетов
Для работы дизайнера отчетов необходимо сначала настроить маршрут для файлаstimulsoft.designer.js, а затем – для страницы designer.html.
app.get('/designer', (req, res) => {
res.sendFile(__dirname + '/designer.html');
});
app.get('/stimulsoft.viewer.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.designer.js");
});
Создание страницы дизайнера
Здесь тот же алгоритм работы – создаем новый файл, например,designer.html, в директории проекта. Далее добавляем следующий код в HTML-файл, чтобы загрузить необходимые библиотеки Stimulsoft Reports.JS и инициализировать дизайнер:
<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Designer</title>
<script src="/stimulsoft.reports.js"></script>
<script src="/stimulsoft.viewer.js"></script>
<script src="/stimulsoft.designer.js"></script>
</head>
<body>
<div id="designer"></div>
<script>
var options = new Stimulsoft.Designer.StiDesignerOptions();
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml("designer");
var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
designer.report = report;
</script>
</body>
</html>