Автор: Eliza Leppik

Весь блог
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. 
Далее настроим route для страницы 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>

Примеры

Мы подготовили примеры использования наших продуктов для создания отчетов и дашбордов на фреймворке Express.

Итог

Надеемся, эта статья поможем вам настроить Stimulsoft Reports.JS в Express для Node.js, и, в конечном итоге, создавать, редактировать, просматривать, печатать отчеты. Наш генератор отчетов для JavaScript позволяет работать с любым веб-сервером, вам нужно лишь настроить ваш веб-сервер для передачи и последующей загрузки JS-скриптов в браузер. Не забудьте при этом настроить пути и имена файлов в соответствии с конкретными настройками вашего проекта.
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.