Компонента React

[stimulnub2020]

День добрый

Возможно ли использование пакета 'stimulsoft-reports-js' в React? Или это только для node.js?

Я попробовал реализовать React-компонент для просмотра отчета, но даже одна строка импорта вызывает ошибки:

Код: Выделить всё

import ReportJS from 'stimulsoft-reports-js';

Есть ли примеры реализации отчета в виде React-компоненты?

Спасибо

[Aleksey]

Здравствуйте,

Вы можете найти примеры по следующей ссылке
https://github.com/stimulsoft/Samples-J ... ster/React

либо создать на
https://publish.stimulsoft.com/

Спасибо.

[stimulnub2020]

Вы можете найти примеры по следующей ссылке
https://github.com/stimulsoft/Samples-J ... ster/React
либо создать на
https://publish.stimulsoft.com/

Там везде реализация в html. Возможно ли это реализовать на чистом JavaScript? Как для Angular, например, где публикация выполняется именно в чистый JavaScript.

[Aleksey]

Здравствуйте,

Не совсем поняли что вы хотите.
В ангулере также есть html в который вкидывается компонент.

Спасибо.

[stimulnub2020]

Не совсем поняли что вы хотите.

Пробовал сделать вот так, не работает:

Код: Выделить всё

import * as React from "react";
import ReportJS from 'stimulsoft-reports-js';

export default class DummyReport extends React.Component {

  componentWillMount() {
    var Stimulsoft = ReportJS.Stimulsoft;
    console.log("Stimulsoft Reports started");

     var report = Stimulsoft.Report.StiReport.createNewReport();
    report.loadFile("reports/Invoice.mrt");
    console.log("Stimulsoft Reports created");

    var options = new Stimulsoft.Viewer.StiViewerOptions();
    options.appearance.fullScreenMode = false;
    options.toolbar.displayMode = Stimulsoft.Viewer.StiToolbarDisplayMode.Separated;
    console.log("Stimulsoft options created");

    this.viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
    console.log("Stimulsoft Reports Viewer created");

    this.viewer.report = report;
  }

  componentDidMount() {
    console.log("Stimulsoft Reports DidMount before");
    this.viewer.renderHtml("viewerContent");
    console.log("Stimulsoft Reports DidMount after");
  }

  render() {
    return (
      <div id="viewerContent"></div>
    );
  }
}

[Aleksey]

Здравствуйте,

JS скрипты надо подключать вручную, не через npm. Npm скрипты только для node.js

Спасибо.

[stimulnub2020]

JS скрипты надо подключать вручную, не через npm. Npm скрипты только для node.js

Вот это засада. Получается, что полноценно встроить просмотр отчетов в отдельное React-приложение не получится.
А вообще планируется добавить поддержку npm-пакетов для React?

Спасибо

[Aleksey]

Здравствуйте,

Посмотрите примеры, там показано как встроить, только надо подключить правильно скрипты не через npm.
Других планов нет.

Спасибо.

[stimulnub2020]

Посмотрите примеры, там показано как встроить, только надо подключить правильно скрипты не через npm.

Во всех примерах встраивание идет через загрузку скриптов в html-странице. У меня приложение на React-admin, каким образом впихнуть viewer в пределах генерируемой страницы, я не представляю. Получается, только грубой ссылкой на отдельную html-страницу, теряя при этом всю навигацию, меню и проч.

Других планов нет.

Ясно. Похоже, от приобретения дашбордов придется отказаться, крутить все в отдельных страницах нет никакого смысла.

[Aleksey]

Здравсвтуйте,

Вышлите простой пример, в который вам надо встроить наш вьювер.
Мы попробуем решить проблему, после вы сможете перенести по примеру уже в свой проект.

Спасибо.