Svelte.js 애플리케이션에서 ActiveReportsJS 보고서 디자이너 시작하기
Svelte 애플리케이션 만들기
Svelte 애플리케이션을 만드는 가장 쉬운 방법은 SvelteKit 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행합니다.
npm create svelte@latest arjs-svelte-designer-apparjs-svelte-designer-app이러한 명령이 성공적으로 실행되면 Visual Studio Code와 같이 즐겨 사용하는 IDE에서 새로 만든 것을 열 수 있습니다 .
ActivereportsJS npm 패키지 설치
npm @grapecity/activereports패키지에는 Svelte 애플리케이션에 통합될 수 있는 순수한 구성 요소가 포함되어 있습니다. ActiveReportsJS Report Designer
이 패키지의 최신 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.
npm install @grapecity/activereports%npm_version%
# or if you use yarn
yarn add @grapecity/activereports%npm_version% Vite.js 구성
Svelte는 Vite.js개발 모드에서 애플리케이션을 실행하고 프로덕션용으로 빌드하기 위해 내부적으로 사용합니다. ActiveReportsJS가 Vite.js와 함께 작동하도록 하려면 Vite.js 구성을 조정해야 합니다. alias.js애플리케이션의 루트에서 호출되는 새 파일을 만들고 다음 코드를 추가합니다.
import moment from "./node_modules/moment";
export const { fn, min, max, now, utc, unix, months,
isDate, locale, invalid, duration, isMoment, weekdays,
parseZone, localeData, isDuration, monthsShort, weekdaysMin,
defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;
export default moment;그런 다음 응용 프로그램의 루트 폴더에서 를 열고 vite.config.js file내용을 다음으로 바꿉니다.
import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
resolve: {
alias: [
{
find: /^moment$/,
replacement: path.resolve(__dirname, "./alias.js"),
},
{
find: /^gc-dv$/,
replacement: path.resolve(
__dirname,
"./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
),
},
{
find: /^\@grapecity\/ar-js-pagereport$/,
replacement: path.resolve(
__dirname,
"./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
),
},
{
find: /^barcodejs$/,
replacement: path.resolve(
__dirname,
"./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
),
},
],
},
};
export default config;애플리케이션에 ActiveReportsJS 보고서 추가
ActiveReportsJS는 보고서 템플릿 파일의 JSON형식과 확장자를 사용합니다.rdlx-json
static응용 프로그램의 폴더 에서 라는 새 파일을 만들고 report.rdlx-json다음 내용을 삽입하십시오.
{
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Designer",
"Style": {
"FontSize": "18pt",
"PaddingLeft": "5pt",
"PaddingTop": "5pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}애플리케이션에 보고서 디자이너 구성 요소 추가
파일 의 기본 내용을 src\routes\+page.svelte다음 코드로 바꿉니다.
<script lang="ts">
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
import {Designer} from "@grapecity/activereports/reportdesigner";
import { onMount } from 'svelte';
onMount(() => {
let designer = new Designer("#designer-host");
designer.setReport({id: "report.rdlx-json"});
});
</script>
<div id="designer-host"></div>
<style>
#designer-host {
width: 100%;
height: 100vh;
}
</style>서버 측 렌더링 비활성화
기본적으로 SvelteKit은 서버에서 먼저 모든 페이지를 렌더링하고 클라이언트에 HTML로 보냅니다. 그러나 ActiveReportsJS는 클라이언트 측에서만 작동할 수 있습니다. 따라서 보고서 뷰어가 포함된 페이지에 대한 서버측 렌더링을 비활성화해야 합니다. +page.js다음 내용이 포함된 파일 을+page.svelte
export const prerender = false;
export const ssr = false;애플리케이션 실행 및 테스트
yarn run dev또는 명령을 사용하여 응용 프로그램을 실행할 수 있습니다 npm run dev. 기본적으로 프로젝트는 http://localhost:5173/ 에서 실행됩니다 . 이 URL을 탐색하면 ActiveReportsJS, ActiveReportsJS 보고서 디자이너가 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인이 표시됩니다. 보고서 항목 추가, 해당 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 구성 요소를 사용하는 방법에 대한 자세한 내용은 보고서 디자이너 인터페이스 페이지를 참조하십시오 . 보고서 디자이너 구성 요소는 TypeScript 선언과 함께 제공되는 풍부한 API를 노출하므로 Svelte 애플리케이션 내에서 쉽게 사용할 수 있습니다.