Svelte

Svelte 응용 프로그램 생성

Svelte 응용 프로그램을 생성하는 가장 쉬운 방법은 SvelteKit 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 아래 명령어를 실행하세요.

npm create svelte@latest arjs-svelte-viewer-app

기능에 대한 몇 가지 질문이 있으며, 아래에서 추천 답변을 확인할 수 있습니다.

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!

명령을 성공적으로 실행하면, Visual Studio Code와 같은 원하는 IDE에서 새로 만든 arjs-svelte-viewer-app을 열 수 있습니다.

ActivereportsJS npm 패키지 설치

MESCIUS는 npm 패키지를 통해 Svelte 보고서 뷰어 컴포넌트를 제공합니다.@mescius/activereportsjs-svelte. 이 패키지는 컴포넌트의 작동에 필수적인 핵심 기능을 포함하는 기본 @mescius/activereportsjs패키지를 기반으로 구축됩니다.

@mescius/activereportsjs-svelte 패키지의 최신 버전과 종속성을 설치하기 위해, 응용 프로그램의 루트 디렉터리에서 아래 명령어를 실행하세요.

npm install @mescius/activereportsjs-svelte@latest
# or if you use yarn
yarn add @mescius/activereportsjs-svelte@latest

응용 프로그램에 ActiveReportsJS 보고서 추가

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

응용 프로그램의 static 폴더에 report.rdlx-json이라는 새 파일을 만들고 다음 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"
      }
    ]
  }
}

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

src\routes\+page.svelte 파일의 기본 내용을 다음 코드로 교체합니다.

<script lang="ts">
    import '@mescius/activereportsjs/styles/ar-js-ui.css';
    import '@mescius/activereportsjs/styles/ar-js-viewer.css';
    import {Viewer} from "@mescius/activereportsjs-svelte";
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</div>

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

서버 사이드 렌더링 비활성

기본적으로 SvelteKit은 모든 페이지를 먼저 서버에서 렌더링하여 HTML로 클라이언트에 전송합니다. 하지만 ActiveReportsJS는 클라이언트 측에서만 작동할 수 있습니다. 따라서 보고서 뷰어가 포함된 페이지에 대한 서버 사이드 렌더링을 비활성화해야 합니다. +page.svelte 파일 옆에 다음 내용이 포함된 +page.js 파일을 추가함으로써 서버 사이드 렌더링을 비활성화 할 수 있습니다.

export const prerender = false;
export const ssr = false;

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

yarn run dev 또는 npm run dev 명령어를 사용하여 응용 프로그램을 실행할 수 있습니다. 기본적으로 프로젝트는 http://localhost:5173/에서 실행됩니다.

응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "Hello, ActiveReportsJS Viewer"라는 텍스트가 표시된 보고서가 나타납니다. 이제 보고서 뷰어 사용자 인터페이스를 사용하여 기본 기능을 테스트할 수 있습니다. 보고서 뷰어 컴포넌트는 TypeScript 선언과 함께 제공되는 rich API를 제공하므로 Svelte 응용 프로그램 내에서 쉽게 사용할 수 있습니다.