[{"id":"d0f3199c-ffe7-40df-879b-a8a764bca787","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50416db6-897f-4c9c-b30b-ed716fdd5b72","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"48cfc0ec-0dd2-4678-925f-405106d02111","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c0bb080-08fe-4bec-b298-49fa5b3a6fe7","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1ec6eaf9-c6e5-4100-967f-4c0e2e960f06","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"b26eb997-dc0c-44b7-9474-d35457467003","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"524e4b1b-8eab-4072-b883-4deac3b01cb2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9d7810c2-8414-4a5e-828a-78a540b16185","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8dcc8883-e0a7-4eb3-a71d-a1bd98d87c3d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4f6362aa-713f-4b7d-aade-cb070a09d6bd","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9d592a12-5c73-4de3-b90c-57b1068b97a3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ffa36b62-7b10-4c1a-ac58-5d5650464364","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"73ceaeee-c0a3-450d-a154-e48af35eff2e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5f172525-039e-487e-9623-5c36db890ef3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"b404bfd7-e4f4-48f2-84bd-17efac79f701","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e2219242-2907-44e2-84e8-41ba89c0d27c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7a28f14e-74a4-4c70-b23b-5f2cf009d038","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"75ab7a8e-d98c-485a-ab1d-9c2df4655cab","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1eb7b181-1afc-4d87-a09e-ebaaee7fe824","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"28fbec9d-64cc-4602-b912-1458787c3eff","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7201e312-2fd5-4d6f-a432-fe2f957acf7c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4678407e-cc4d-42c8-b337-5fe7d5b29b81","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"98f1d25f-1756-455d-8293-6fe94beb2925","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-designer-app
arjs-svelte-designer-app
이러한 명령이 성공적으로 실행되면 Visual Studio Code와 같이 즐겨 사용하는 IDE에서 새로 만든 것을 열 수 있습니다 .
npm @grapecity/activereports
패키지에는 Svelte 애플리케이션에 통합될 수 있는 순수한 구성 요소가 포함되어 있습니다. ActiveReportsJS Report Designer
이 패키지의 최신 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.
npm install @grapecity/activereports%npm_version%
# or if you use yarn
yarn add @grapecity/activereports%npm_version%
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는 보고서 템플릿 파일의 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 애플리케이션 내에서 쉽게 사용할 수 있습니다.