[{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
        
(Showing Draft Content)

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

ActiveReportsJS 보고서 디자이너에는 바로 사용 가능한 미리 보기 기능이 없어 호스팅 응용 프로그램의 코드를 설정해야 합니다. 이 페이지에서는 여러 가지 일반 시나리오에 대한 사용법을 제공합니다.

"미리 보기" 버튼 사용

ActiveReportsJS 보고서 디자이너 컴포넌트에는 도구 모음에 미리 보기 버튼이 있습니다. 그러나 이 버튼은 사용하도록 설정되어 있지 않아 기본적으로 표시되지 않습니다. 이 버튼을 사용하도록 설정하려면 코드에서 디자이너 컴포넌트에 대해 onRender 작업 처리기를 구성해야 합니다. 자세한 내용은 작업 처리기 페이지를 확인하십시오. 사용자가 미리 보기 버튼을 클릭하면 ActiveReportsJS 디자이너가 onRender 처리기를 호출합니다. 디자이너가 첫 번째 인수에서 ID, 표시 이름 및 보고서 정의로 구성된 현재 표시된 보고서의 정보를 전달합니다. onRender 처리기는 ActiveReportJS 뷰어에서 보고서 정의를 로드하거나 지원되는 형식 중 하나로 보고서를 내보낼 수 있습니다. 자세한 내용은 다음 페이지를 확인하십시오.

다음은 ActiveReportsJS 보고서 뷰어에 현재 표시된 보고서를 표시하는 React 응용 프로그램용 onRender 처리기의 예입니다.

import React from "react";
import "./App.css";
import {
  Viewer as ReportViewer,
  Designer,
} from "@grapecity/activereports-react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/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;

React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 라이브 데모를 참조하십시오.

UI 이벤트에 대한 응답으로 보고서 미리 보기

응용 프로그램에서는 ActiveReportJS 디자이너 인스턴스의 getReport 메서드를 사용하여 현재 표시된 보고서 정보를 가져올 수 있습니다. 이러한 접근 방식은 지원되는 형식 중 하나로 보고서를 내보내는 사용자 정의 보고서 미리 보기 UI를 추가합니다. 다음은 Angular 응용 프로그램에 대해 이와 같이 구현한 예입니다.

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

@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');
  };
}

React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 라이브 데모를 참조하십시오.

관련 링크