[{"id":"d1ffb4db-74d8-4220-a972-c13d6fa8123b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1ea0de02-4d95-4f9a-bd1e-e4f1e58e5146","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cd911f7e-e532-41c5-b415-fd5a1a83b8d6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"54a4a5be-ed96-43df-a901-6a53495a4ff7","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fe055276-b12c-40ab-9569-c2d9ebd4f5b8","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"71be3f0b-8a29-45e8-8d43-4965d3e0897e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ea12b649-a786-495c-ad0f-7ef38ce94a9e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9582e49d-f693-4f0d-96b3-7f4accc2bb6e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a6f863bb-031a-44cc-8a12-fc91219e8c15","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c5da505a-f378-4333-b85f-2429d057b519","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7daee9d7-e908-4166-9d62-2ca3e93547fb","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8659262c-9b4e-4e31-9c6c-b97d1d0e0740","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"966a73cf-5b72-4f4b-8939-e7a06e0863da","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"6c63e26a-a944-4aa9-a190-ecc8ac767287","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3af6c981-53ee-41ba-8ef7-03efb56a8fff","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8f1b28f2-c419-43fb-b765-5fde0a36fb08","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d67bf68e-cb2e-4b6f-9253-68ca0ee46560","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e23050c1-7dc0-4265-a2d9-eaaf938c2d35","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c9c6aa74-7d95-41b4-9702-98774683bf0a","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"83a0368a-9a1a-4b31-8081-d2edc554d42f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0e562678-2dd4-4972-ab4d-e718f050accb","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9965a8b8-f6c2-4727-a6d6-4cf12bd5b14f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e805fe27-20e5-4468-85b9-078665b18438","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a1a9a9bc-d0b6-4d18-8abf-5c6f2a7cfa40","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fdcc0c41-acb5-4465-9b66-7e06200a48c4","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"05d00001-6629-4aea-be2a-ddc570ca6a09","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
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
을 열 수 있습니다.
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는 보고서 템플릿 파일에 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 응용 프로그램 내에서 쉽게 사용할 수 있습니다.