PureJS JavaScript 리포트 뷰어 가져오기
페이지 정보
작성자 GrapeCity 작성일 2021-03-25 10:22 조회 2,307회 댓글 0건본문
관련링크
이런 응용 프로그램은 HTML 마크업, CSS 스타일, JavaScript 코드로 구성됩니다. 자주 사용하는 텍스트 편집기에서 index.html
파일을 만들고 다음 코드를 해당 파일에 삽입할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ARJS Report Viewer</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>
ActivereportsJS 설치
CDN 및 NPM을 통해 ActiveReportJS 스크립트와 스타일을 배포합니다. JavaScript 응용 프로그램용 ActiveReportsJS 보고서 뷰어를 가장 쉽게 설치하는 방법은 CDN 기반 참조를 HTML 페이지의 head
태그에 추가하는 것입니다. 필요한 스크립트 및 스타일에 대한 자세한 내용은 를 참조하십시오.
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>
리포트 뷰어 호스트 요소 추가
리포트 뷰어를 호스트할 div
요소를 body
태그에 추가합니다.
<div id="viewer-host"></div>
viewer-host
요소의 스타일을 head
태그에 추가합니다.
<style> #viewer-host { margin: 0 auto; width: 100%; height: 100vh; } </style>
ActiveReportsJS 보고서를 응용 프로그램에 추가
ActiveReportsJS는 보고서 템플릿 파일에 및 rdlx-json
확장자를 사용합니다. 응용 프로그램의 루트 폴더에서 report.rdlx-json
이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.
{ "Type": "report", "Body": { "Name": "Body", "Type": "section", "ReportItems": [ { "Type": "textbox", "Name": "textbox1", "Style": { "FontSize": "18pt" }, "Value": "Hello, ActiveReportsJS Viewer", "Height": "10in" } ] }, "Name": "Report" }
JavaScript 보고서 뷰어 구성 요소 초기화
viewer-host
요소 바로 뒤의 body
태그에 다음 스크립트를 추가하여 요소가 렌더링된 후 이 스크립트가 실행되도록 합니다. 이 코드는 의 인스턴스를 초기화하고 이전 단계에서 추가한 보고서 템플릿을 엽니다.
<script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("report.rdlx-json"); </script>
응용 프로그램 실행 및 테스트
어떤 를 사용해도 응용 프로그램을 실행할 수 있습니다. 예를 들어, 패키지가 된 경우 응용 프로그램의 루트 폴더에서 http-server
명령을 실행할 수 있습니다. localhost(또는 127.0.0.1)에서 실행되는 앱을 열어야 합니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 구성 요소가 페이지에 나타납니다. 뷰어에는 “안녕하세요, ActiveReportsJS 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.
관련 링크
댓글목록
등록된 댓글이 없습니다.