PureJS JavaScript 리포트 뷰어 가져오기
페이지 정보
작성자 GrapeCity
본문
관련링크
이런 응용 프로그램은 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 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.
관련 링크
댓글목록
등록된 댓글이 없습니다.