ActiveReportsJS API 시작하기

ActiveReportsJS는 보고서 뷰어 및 보고서 디자이너 컴포넌트 외에도 프로그래밍 방식으로 보고서를 만들고 PDF, Excel, HTML 형식으로 내보내는 데 사용할 수 있는 API 집합을 제공합니다. 이 기능은 사용자 정의 보고서 디자이너 또는 사용자 정의 보고서 뷰어를 구현하거나 대화형 UI를 사용하지 않고 보고서를 빌드 및 실행하고 내보내려는 개발자에게 유용합니다. 이 자습서에서는 API를 사용하여 프로그래밍 방식으로 간단한 보고서를 만들고 PDF로 내보내는 방법을 보여 줍니다. React.js와 TypeScript가 자습서의 프레임워크로 사용되지만 여기서 설명하는 기법은 다른 프레임워크에도 적용됩니다. Visual Studio Code 또는 TypeScript를 지원하는 다른 IDE의 IntelliSense 기능에서 인식할 수 있는 형식 선언이 API에 제공되기 때문에 API를 최대한 활용하려면 TypeScript를 사용하는 것이 좋습니다.

React 응용 프로그램 만들기

새 React 응용 프로그램을 만드는 가장 쉬운 방법은 React 앱 만들기 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Typescript 템플릿으로 React 응용 프로그램을 만듭니다. 자세한 내용은 React 앱 만들기 사이트의 시작하기를 참조하십시오.

# npm 6.x
npm init react-app arjs-api --template typescript

# npm 7+, extra double-dash is needed
npm init react-app arjs-api -- --template typescript

yarn을 사용하는 경우:

yarn create react-app arjs-api --template typescript

React 응용 프로그램을 만드는 추가 방법은 공식 설명서를 참조하십시오.

ActivereportsJS npm 패키지 설치

ActiveReportsJS API는 @grapecity/activereports npm 패키지를 통해 배포됩니다. 동일한 패키지에 내보내기 필터와 기타 핵심 기능이 포함되어 있습니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

npm install @grapecity/activereports

yarn을 사용하는 경우:

yarn add @grapecity/activereports

보고서 서비스 구현

src 폴더에 reportService.ts라는 새 파일을 만들고 다음 내용을 포함합니다.

import { Rdl as ARJS, PageReport } from "@grapecity/activereports/core";
import { PdfExport } from "@grapecity/activereports";

export function buildReportDefinition(): ARJS.Report {
  const report: ARJS.Report = {};
  report.Width = "8.5in";
  report.Page = {
    TopMargin: "0.5in",
    BottomMargin: "0.5in",
    LeftMargin: "0.5in",
    RightMargin: "0.5in",
    PageWidth: "8.5in",
    PageHeight: "11in",
  };
  const textbox: ARJS.Textbox = { Type: "textbox", Name: "txtGreetings" };
  textbox.Value = "Hello, ActiveReportsJS";
  textbox.Style = {
    FontSize: "18pt",
  };
  textbox.Width = "7in";
  textbox.Height = "0.5in";
  report.Body = { ReportItems: [textbox] };
  return report;
}

export async function exportReport(
  reportDefinition: ARJS.Report
): Promise<PdfExport.PdfExportResult> {
  const pageReport = new PageReport();
  await pageReport.load(reportDefinition);
  const doc = await pageReport.run();
  return PdfExport.exportDocument(doc, {
    info: {
      title: "Generated by ActiveReportsJS",
    },
  });
}

첫 번째 함수는 ActiveReportsJS의 핵심 API를 사용하여 보고서 정의를 빌드합니다. 두 번째 함수는 PDF 내보내기 API를 사용하여 보고서를 PDF로 내보냅니다.

보고서 서비스 사용

src\App.tsx 파일을 열고 파일 내용을 다음 코드로 바꿉니다.

import "./App.css";
import { buildReportDefinition, exportReport } from "./reportService";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <a
          className="App-link"
          href="."
          onClick={(e) => {
            e.preventDefault();
            const reportDefinition = buildReportDefinition();
            exportReport(reportDefinition)
              .then((result) => {
                result.download("ActiveReportsJSReport");
              })
              .catch(console.error);
          }}
        >
          Generate Report
        </a>
      </header>
    </div>
  );
}

export default App;

응용 프로그램 실행 및 테스트

npm start 또는 yarn start 명령을 실행하면 JavaScript 힙의 메모리가 부족하다는 오류가 발생하고 명령이 실패할 수 있습니다. 이 경우 package.json 파일을 열고 start 스크립트를 다음 스크립트로 바꿉니다.

react-scripts --max_old_space_size=8192 start

npm start 또는 yarn start 명령을 다시 실행합니다. 아래와 같은 오류가 발생하고 명령이 실패하는 경우 node_modules 폴더를 삭제하고 npm install 또는 yarn을 실행하여 필요한 모든 패키지를 다시 설치합니다. 그런 다음 npm start 또는 yarn start를 다시 실행합니다.

> react-scripts start

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'react'

응용 프로그램이 시작되면 "보고서 생성" 링크를 클릭하여 보고서를 빌드하고 내보냅니다. 브라우저 설정에 따라 PDF 문서가 외부 프로그램인 브라우저에서 열리거나 다운로드할 수 있도록 처리됩니다.