PureJS 웹 응용 프로그램에 JavaScript Report Viewer를 추가하는 방법
페이지 정보
작성자 GrapeCity
작성일 2022-11-07 10:38 조회 482회
댓글 0건
본문
관련링크
이 문서에서는 텍스트 편집기로 Visual Studio Code를 사용한다고 가정합니다.
이 블로그에서는 다음 단계에 따라 ARJS 응용 프로그램에 VanillaJS 뷰어 컴포넌트를 추가하는 방법을 보여 드리겠습니다.
소개
ActiveReportsJS는 프레임워크와 상관없이 프런트엔드 응용 프로그램에 쉽게 통합할 수 있는 100% 클라이언트 측 보고 솔루션입니다. 이 문서에서는 ActiveReportsJS 뷰어 컴포넌트를 Vanilla JS 응용 프로그램에 통합하는 간단하지만 포괄적인 가이드를 제공합니다.
VS Code에서 Vanilla JS 응용 프로그램 설정
아직 JavaScript 프로젝트를 만들지 않았다면 ARJS-viewer-app이라는 이름의 폴더를 만들어 시작할 수 있습니다. Visual Studio Code 터미널을 통해 하고 싶다면 다음 명령을 실행하여 폴더를 만들 수 있습니다.
mkdir ARJS-viewer-app
그 후에는 VS Code에서 파일 > 폴더 열기를 선택한 다음 ARJS-viewer-app을 선택하여 디렉터리를 엽니다. 이제 제대로 되었습니다. 이 명령을 입력하여 index.html 파일을 만들 수 있습니다.
touch index.html
이제 파일을 만들었으니 다음 상용구 코드를 붙여 넣을 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ARJS VanillaJS Viewer Application</title> <meta name="description" content="VanillaJS Report Viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>
ARJS 종속성 설치
이 연습에서 간단한 HTML 페이지를 만들었기 때문에 ActiveReportsJS 종속성을 포함하는 가장 쉬운 방법은 GrapeCity CDN을 참조하는 스크립트 태그를 추가하는 것입니다. 모든 기능이 제대로 작동하도록 ar-js-core, ar-js-viewer 및 기타 내보내기 패키지를 참조하는 스크립트를 포함하겠습니다. 기본 뷰어 및 UI 컴포넌트에 사용되는 CSS 스타일에 대한 링크도 포함하겠습니다. 다음 코드를 HTML 헤더에 붙여 넣습니다.
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-html.js"></script>
더 크거나 더 복잡한 응용 프로그램으로 작동하는 경우 노드 패키지 관리자를 통해 참조를 설치할 수 있습니다. 자세한 내용은 를 읽어보시기 바랍니다.
뷰어 컴포넌트를 위한 호스트 요소 추가
이제 뷰어 컴포넌트를 호스트하는 div 요소를 HTML에 추가하겠습니다. 지금은 본문 태그 내에 다음 코드를 붙여 넣겠습니다.
<div id="viewer-host"></div>
브라우저 창의 전체 너비와 높이를 채우도록 이 요소에 스타일 지정도 추가하겠습니다. 이 튜토리얼에서는 페이지 상단에 있는 헤더 태그에 CSS를 추가할 수 있습니다.
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>보고서 파일 만들기
ARJS는 .rdlx-json 확장이 있는 보고서 파일을 사용하므로 를 통해 보고서를 디자인하고 파일을 만들어 JSON 구문으로 구조화하거나 를 사용하여 프로그래밍 방식으로 생성할 수 있습니다. 이 튜토리얼에서는 파일을 만들어 일부 JSON에 붙여 넣겠습니다. 시작하려면 다음 명령을 VS Code 터미널에 붙여 넣습니다.
touch report-test.rdlx-json
이전에 언급한 대로 이제 JSON 구문을 사용하여 보고서의 구조를 만들 수 있습니다. 다음 코드로 시작하여 기본 보고서 파일을 만들어보겠습니다.
{
"Name": "Report-test",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "textBox1",
"Value": "Thanks for reading the article!",
"Style": {
"FontSize": "20pt"
},
"Width": "8.5in",
"Height": "1in"
}
]
}
}뷰어 컴포넌트 초기화
이제 #viewer-host div를 파일 및 적합한 스타일 지정에 추가하였으니 다음 단계는 JavaScript 코드 내에서 보고서 뷰어를 초기화하는 것입니다. index.html 파일의 본문 요소 아래쪽에 이 스크립트를 추가합니다. 이는 뷰어에 페이지에서 진행되는 위치는 물론 브라우저에 렌더링할 보고서를 알려줍니다.
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("report-test.rdlx-json");
</script>프로젝트 실행
문서별로 http-server 패키지를 사용하여 로컬 호스트에서 응용 프로그램을 테스트할 수 있습니다. npm 패키지를 전역적으로 설치하려면 동일한 VS Code 터미널에서 다음 명령을 실행합니다.
npm install -g http-server
설치되고 나면 'http-server' 명령을 실행하여 시스템에 로컬 서버를 만듭니다. 터미널에는 특정 포트 번호로 파일에 액세스하는 방법에 대한 가이드가 있습니다. 웹 브라우저에서 'localhost:80'과 같이 제공된 URL로 이동합니다.
모두 제대로 되면 JSON을 통해 만든 보고서와 페이지에서 뷰어 컴포넌트를 볼 수 있습니다.
요점
이 가이드에서 예상한 대로 진행되지 않으면 를 찾아보거나 Q&A 게시판을 통해 문의하시기 바랍니다. 이제 이 기본적인 ARJS 뷰어 응용 프로그램을 만들었으니 및 로 추가적으로 사용하고 코드를 통해 보고서를 만드는 방법에 대한 단계를 를 읽거나 제공한 을 확인할 수 있습니다.
지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
