[{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]}]
        
(Showing Draft Content)

ActiveReportsJS: 설치

ActiveReportsJS는 크로스 플랫폼 디자이너 응용 프로그램과 여러 JavaScript 라이브러리로 구성되어 있습니다. 이 페이지에서는 해당 컴포넌트와 각 컴포넌트에 대한 설치 지침을 대략적으로 설명합니다.

설치 패키지

GrapeCity에서는 Windows, Mac, Linux 설치 패키지를 제공합니다. 사용 중인 운영 체제에 해당하는 패키지를 홈페이지에서 다운로드할 수 있습니다.

독립 실행형 보고서 디자이너 응용 프로그램

독립 실행형 보고서 디자이너는 Electron으로 빌드된 크로스 플랫폼 데스크톱 응용 프로그램입니다. 독립 실행형 디자이너를 사용하여 보고서를 작성할 수 있습니다. 자세한 내용은 보고서 작성자 가이드를 참조하십시오.

설치 프로그램은 다운로드한 설치 패키지의 designer 폴더에 있습니다.

평가 버전은 30일 동안 사용할 수 있습니다.

핵심 라이브러리

이 라이브러리는 핵심 기능을 포함하고 있고 응용 프로그램의 코드 내에서 사용할 수 있는 여러 유형을 제공합니다.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-core.js 스크립트에 대한 참조가 포함될 수 있습니다.

또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js)를 통해 사용할 수 있습니다.

PDF 내보내기 라이브러리

이 라이브러리에는 보고서를 PDF 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 보고서 내보내기 페이지를 참조하십시오.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 PDF 내보내기 기능이 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-pdf.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.js)를 통해 사용할 수 있습니다.

HTML 내보내기 라이브러리

이 라이브러리에는 보고서를 HTML 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 보고서 내보내기 페이지를 참조하십시오.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 HTML 내보내기 기능이 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-html.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js)를 통해 사용할 수 있습니다.

XLSX 내보내기 라이브러리

이 라이브러리에는 보고서를 XLSX 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 보고서 내보내기 페이지를 참조하십시오.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 XLSX 내보내기 기능이 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-xlsx.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-xlsx.js)를 통해 사용할 수 있습니다.

테이블 형식 데이터 내보내기 라이브러리

이 라이브러리에는 보고서를 테이블 형식 데이터(CSV) 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 보고서 내보내기 페이지를 참조하십시오.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 테이블 형식 데이터 내보내기 기능이 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-tabular-data.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js)를 통해 사용할 수 있습니다.

보고서 뷰어 라이브러리

이 라이브러리에는 JavaScript 보고서 뷰어 컴포넌트가 포함되어 있습니다.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 보고서 뷰어 컴포넌트가 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-viewer.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js)를 통해 사용할 수 있습니다.

보고서 디자이너 라이브러리

이 라이브러리에는 JavaScript 보고서 디자이너 컴포넌트가 포함되어 있습니다.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 보고서 디자이너 컴포넌트가 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist 폴더에서 찾을 수 있는 ar-js-designer.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-designer.js)를 통해 사용할 수 있습니다.

Angular NPM 패키지

이 패키지에는 Angular 보고서 뷰어Angular 보고서 디자이너 컴포넌트가 포함되어 있습니다.

Angular 응용 프로그램에서 사용하려면 @grapecity/activereports-angular NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.

기본 자습서를 보려면 Angular 보고서 뷰어 시작하기Angular 보고서 디자이너 시작하기 페이지를 참조하십시오.

React NPM 패키지

이 패키지에는 React 보고서 뷰어React 보고서 디자이너 컴포넌트가 포함되어 있습니다.

React 응용 프로그램에서 사용하려면 @grapecity/activereports-react NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.

기본 자습서를 보려면 React 보고서 뷰어 시작하기React 보고서 디자이너 시작하기 페이지를 참조하십시오.

Vue NPM 패키지

이 패키지에는 Vue 보고서 뷰어Vue 보고서 디자이너 컴포넌트가 포함되어 있습니다.

Vue 응용 프로그램에서 사용하려면 @grapecity/activereports-vue NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.

기본 자습서를 보려면 Vue 보고서 뷰어 시작하기Vue 보고서 디자이너 시작하기 페이지를 참조하십시오.

보고서 뷰어 지역화 라이브러리

ActiveReportsJS에는 보고서 뷰어 사용자 인터페이스의 중국어 및 일본어 번역이 포함되어 있습니다.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 해당 번역이 포함된 @grapecity/activereports-localization NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist\locales 폴더에서 찾을 수 있는 ar-js-locales.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조(https://cdn.mescius.com/activereportsjs/4.latest/dist/locales/ar-js-locales.js)를 통해 사용할 수 있습니다.

보고서 디자이너 지역화 라이브러리

ActiveReportsJS에는 보고서 디자이너 사용자 인터페이스의 중국어 및 일본어 번역이 포함되어 있습니다.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 해당 번역이 포함된 @grapecity/activereports-localization NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 dist\locales\designer 폴더에서 찾을 수 있는 ja-locale.js, ko-locale.jszh-locale.js 스크립트에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다.

보고서 뷰어 UI 테마

ActiveReportsJS에는 보고서 뷰어 컴포넌트를 위한 여러 가지 UI 테마가 포함되어 있습니다. 자세한 내용은 보고서 뷰어 테마 페이지를 참조하십시오.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 이러한 테마가 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램은 다운로드한 설치 패키지의 styles 폴더에서 찾을 수 있는 ar-js-ui.css, ar-js-viewer.css, dark-yellow-ui.css, dark-yellow-viewer.css, green-ui.css, green-viewer.css, light-blue-ui.csslight-blue-viewer.css 스타일에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다.

보고서 디자이너 UI 테마

ActiveReportsJS에는 보고서 디자이너 컴포넌트를 위한 여러 가지 UI 테마가 포함되어 있습니다. 자세한 내용은 보고서 디자이너 테마 페이지를 참조하십시오.

모듈 번들러(예: webpack)를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 이러한 테마가 포함된 @grapecity/activereports NPM 패키지를 package.json 파일의 종속성 목록에 추가할 수 있습니다.

순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 styles 폴더에서 찾을 수 있는 ar-js-ui.css, ar-js-designer.css, dark-yellow-ui.css, dark-yellow-designer.css, green-ui.css, green-designer.css, light-blue-ui.csslight-blue-designer.css 스타일에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다.