ActiveReportsJS — это решение для создания отчетов на стороне клиента, которое можно использовать в различных интерфейсных средах и библиотеках. От ванильного JavaScript до NuxtJS, ARJS чрезвычайно гибок при разработке вашего приложения и использовании его компонентов. В этой статье мы обсудим, как просто добавить и настроить компонент средства просмотра в вашем приложении React с помощью кода Visual Studio, выполнив следующие действия:

  1. Установка зависимостей
  2. Импорт стилей
  3. Создание файла отчета
  4. Интеграция компонента Viewer в наше приложение
  5. Запуск приложения

Установка зависимостей

Если у вас уже создано приложение для реагирования, начнем с установки пакета @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 г.