ActiveReportsJS 디자이너에서 보고서 미리 보기

import React from "react";
import "./App.css";
import {
  Viewer as ReportViewer,
  Designer,
} from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs/styles/ar-js-designer.css";

function App() {
  const viewerRef = React.useRef();
  const [viewMode, setViewMode] = React.useState(false);
  const onRender = (report) => {
    setViewMode(true);
    viewerRef.current?.Viewer.open(report.definition);
    return Promise.resolve();
  };

  return (
    <div id="app-host">
      <div id="designer-host" hidden={viewMode}>
        <Designer onRender={onRender} />
      </div>
      <div id="viewer-host" hidden={!viewMode}>
        <ReportViewer ref={viewerRef} />
      </div>
    </div>
  );
}
export default App;

import { Component, ViewChild } from '@angular/core';
import { DesignerComponent } from '@mescius/activereportsjs-angular';
import { Core, PdfExport } from '@mescius/activereportsjs';

@Component({
  selector: 'app-root',
  template:
    '<div id="designer-host"><button (click)="onPdfPreview()">Pdf Preview</button><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(DesignerComponent, { static: false })
  reportDesigner: DesignerComponent;

  report = { id: 'assets/report.rdlx-json', displayName: 'my report' };

  onPdfPreview = async () => {
    const reportInfo = await this.reportDesigner.getReport();
    const report = new Core.PageReport();
    await report.load(reportInfo?.definition);
    const doc = await report.run();
    const result = await PdfExport.exportDocument(doc);
    result.download('exportedreport.pdf');
  };
}