Svelte.js 에서 ActiveReportsJS 리포트 디자이너 시작하기

Svelte 응용 프로그램 생성

Svelte 애플리케이션을 만드는 가장 쉬운 방법은 degit 도구를 사용하고 Svelte 템플릿 중 하나를 복제하는 것입니다. 이 튜토리얼에서는 webpack 템플릿을 사용합니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Typescript 및 webpack을 사용하는 새 Svelte 애플리케이션을 만듭니다.

npx degit sveltejs/template-webpack arjs-viewer-svelte-app
cd arjs-viewer-svelte-app
node scripts\setupTypeScript.js
npm install
# or `yarn` if you use yarn

이러한 명령이 성공적으로 실행되면 Visual Studio Code와 같은 즐겨 사용하는 IDE에서 새로 생성된 arjs-viewer-svelte-app을 열 수 있습니다.

ActivereportsJS npm 패키지 설치

@grapecity/activereports npm 패키지에는 Svelte 애플리케이션에 통합할 수 있는 순수 ActiveReportsJS Report Viewer 컴포넌트가 포함되어 있습니다.

이 패키지의 최신 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.

npm install @grapecity/activereports
# or `yarn add @grapecity/activereports` if you use yarn

Webpack 5 에서 node code 모듈을 위한 폴리필(Polyfill) 설치

v5까지 webpack은 기본적으로 브라우저에 node.js 코어 모듈의 구현을 제공했습니다.

webpack v5 이상에서는 더 이상 그렇지 않습니다. 따라서 약간의 추가 구성이 필요합니다.

먼저 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 crypto-browserify 및 stream-browserify 패키지를 설치합니다.

npm install crypto-browserify stream-browserify
# or `yarn add crypto-browserify stream-browserify` if you use yarn

그런 다음 webpack.config.js 파일의 resolve 객체에 다음 노드를 추가합니다.

 fallback: {
     "crypto": require.resolve("crypto-browserify"),
     "stream": require.resolve("stream-browserify")
 }

응용 프로그램에 ActiveReportsJS 리포트 추가하기

ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식과 rdlx-json 확장자를 사용합니다.

애플리케이션의 'public' 폴더에 'report.rdlx-json'이라는 새 파일을 생성하고 다음 내용을 삽입합니다.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt",
          "PaddingLeft": "5pt",
          "PaddingTop": "5pt"          
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

ActiveReportsJS 스타일 설정하기

src\global.css 파일을 열고 그 내용을 기본 보고서 뷰어 스타일을 가져오는 다음 코드로 대체합니다.

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

응용 프로그램에 보고서 뷰어 컴포넌트 추가하기

src\App.svelte 파일의 기본 콘텐츠를 다음 코드로 바꿉니다.

<script lang="ts">
    import {Viewer} from "@grapecity/activereports/reportviewer";
    import {PdfExport, HtmlExport, TabularDataExport} from "@grapecity/activereports";
    import { onMount } from 'svelte';
    
    onMount(() => {
        let viewer = new Viewer("#viewer-host");
        viewer.open('report.rdlx-json');
    });
</script>

<div id="viewer-host"></div>

<style>
    #viewer-host {
        width: 100%;
        height: 100vh;
    }
</style>

응용 프로그램 실행하기

yarn run dev 또는 npm run dev 명령을 사용하여 애플리케이션을 실행할 수 있습니다. 기본적으로 프로젝트는 http://localhost:8080/에서 실행됩니다.

이 URL을 탐색하면 ActiveReportsJS 보고서 뷰어가 페이지에 나타납니다. 뷰어는 'Hello, ActiveReportsJS Viewer' 텍스트를 보여주는 보고서를 표시합니다. 보고서 뷰어 사용자 인터페이스를 사용하여 기본 기능을 테스트할 수 있습니다.