ActiveReportsJS — это решение для создания отчетов на стороне клиента, которое можно использовать в различных интерфейсных средах и библиотеках. От ванильного JavaScript до NuxtJS, ARJS чрезвычайно гибок при разработке вашего приложения и использовании его компонентов. В этой статье мы обсудим, как просто добавить и настроить компонент средства просмотра в вашем приложении React с помощью кода Visual Studio, выполнив следующие действия:
- Установка зависимостей
- Импорт стилей
- Создание файла отчета
- Интеграция компонента Viewer в наше приложение
- Запуск приложения
Установка зависимостей
Если у вас уже создано приложение для реагирования, начнем с установки пакета @grapecity/activereports-react в ваше приложение через терминал в Visual Studio Code с помощью следующей команды:
npm install @grapecity/activereports-react
Если у вас нет созданного приложения для реагирования, сначала создайте его с помощью следующей команды:
npm init react-app arjs-viewer-app
Импорт стилей
После того, как зависимости будут установлены в наш проект, мы можем добавить стили в наш файл App.css, чтобы обеспечить хорошее отображение компонента средства просмотра. Мы также стилизуем элемент #viewer-div, в котором будет размещаться наше средство просмотра:
@import "@grapecity/activereports/styles/ar-js-ui.css"; @import "@grapecity/activereports/styles/ar-js-viewer.css"; #viewer-host { width: 100%; height: 100vh; }
Создание файла отчета
На следующем этапе мы хотим добавить в наше приложение файл отчета ARJS. А пока давайте сделаем это, либо создав его с помощью кода, либо перетащив отчет, созданный дизайнером, в папку нашего проекта. В любом случае, давайте поместим файл отчета в каталог /public нашего приложения.
Поскольку в наших отчетах используется расширение .rdlx-json, мы можем форматировать свойства и элементы управления, которые будут отображаться в нашем отчете, используя синтаксис JSON. Например, мы можем создать новый файл через обозреватель решений, щелкнув правой кнопкой мыши общедоступную папку и выбрав «Новый файл». Назовем его «report-test.rdlx-json». В этом файле добавьте следующий код:
{ "Name": "report-test", "Body": { "ReportItems": [ { "Type": "textbox", "Name": "TextBox1", "Value": "Testing the textbox!", "Style": { "FontSize": "20pt" }, "Width": "8.5in", "Height": "1.5in" } ] } }
Если вам нужна информация о создании отчета с помощью нашего API, внимательно изучите нашу документацию здесь, чтобы узнать, что можно добавить в отчет во время выполнения.
Интеграция компонента Viewer в наше приложение
Теперь давайте добавим в файл App.js следующий код, чтобы компонент средства просмотра отображался на нашей странице. Это также свяжет отчет, который мы только что сделали, с нашим компонентом просмотра.
import React from "react"; import "./App.css"; import { Viewer } from "@grapecity/activereports-react"; function App() { return ( <div id="viewer-host"> <Viewer report={{ Uri: 'report.rdlx-json' }} /> </div> ); } export default App;
Запуск приложения
Иногда мы сталкиваемся с ошибкой, которая не позволяет нам использовать «npm start» при отладке нашего проекта. Чтобы это исправить, измените стартовый скрипт в файле package.json на следующий:
"start": "react-scripts --max_old_space_size=8192 start"
Запустите проект с помощью команды npm start в терминале. Если все пойдет хорошо, вы увидите компонент просмотра на своей странице и встроенный в него файл отчета. Если вы столкнетесь с дальнейшими проблемами или ошибками, пожалуйста, откройте тикет в нашу службу поддержки для получения дополнительной помощи.
Редактор темы
Если вы хотите настроить цвета, шрифты и темы вьювера отчетов, вы можете сделать это с помощью редактора тем, который находится на нашем сайте. Выберите, какие настройки вы хотите использовать, и просмотрите компонент просмотра на нашей странице. Как только вы найдете понравившуюся тему, загрузите стили CSS с помощью кнопки внизу страницы. После этого переместите файлы в папку стилей в вашем приложении (node_modules/@grapecity/activereports/styles), чтобы перезаписать тему средства просмотра по умолчанию. Если вместо этого вы хотите использовать заранее созданные темы, есть широкий выбор, о котором вы можете узнать здесь.
Заключительные точки
Выполнив действия, описанные в этом пошаговом руководстве, вы должны знать, как добавить компонент средства просмотра в свое реагирующее приложение ARJS. Средство просмотра отлично подойдет для ваших нужд в отчетах, учитывая богатый API, методы настройки и опции перевода языка, которые предоставляет ARJS. Если у вас есть вопросы относительно более сложных вариантов использования, пожалуйста, прочитайте нашу документацию.
Спасибо за использование ActiveReportsJS!
Первоначально опубликовано на https://www.grapecity.com 9 сентября 2022 г.