[{"id":"28fbec9d-64cc-4602-b912-1458787c3eff","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"b404bfd7-e4f4-48f2-84bd-17efac79f701","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"48cfc0ec-0dd2-4678-925f-405106d02111","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"e2219242-2907-44e2-84e8-41ba89c0d27c","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"8c0bb080-08fe-4bec-b298-49fa5b3a6fe7","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"1ec6eaf9-c6e5-4100-967f-4c0e2e960f06","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"524e4b1b-8eab-4072-b883-4deac3b01cb2","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"9d592a12-5c73-4de3-b90c-57b1068b97a3","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5f172525-039e-487e-9623-5c36db890ef3","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"ffa36b62-7b10-4c1a-ac58-5d5650464364","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"7a28f14e-74a4-4c70-b23b-5f2cf009d038","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"4678407e-cc4d-42c8-b337-5fe7d5b29b81","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"98f1d25f-1756-455d-8293-6fe94beb2925","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"9d7810c2-8414-4a5e-828a-78a540b16185","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"75ab7a8e-d98c-485a-ab1d-9c2df4655cab","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"8dcc8883-e0a7-4eb3-a71d-a1bd98d87c3d","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"d0f3199c-ffe7-40df-879b-a8a764bca787","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"4f6362aa-713f-4b7d-aade-cb070a09d6bd","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"b26eb997-dc0c-44b7-9474-d35457467003","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"73ceaeee-c0a3-450d-a154-e48af35eff2e","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"1eb7b181-1afc-4d87-a09e-ebaaee7fe824","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50416db6-897f-4c9c-b30b-ed716fdd5b72","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"7201e312-2fd5-4d6f-a432-fe2f957acf7c","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]}]
이러한 응용 프로그램은 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>
CDN 및 NPM을 통해 ActiveReportJS 스크립트와 스타일을 배포합니다. JavaScript 응용 프로그램용 ActiveReportsJS 보고서 뷰어를 가장 쉽게 설치하는 방법은 CDN 기반 참조를 HTML 페이지의 head
태그에 추가하는 것입니다. 필요한 스크립트 및 스타일에 대한 자세한 내용은 설치를 참조하십시오.
<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-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-html.js"></script>
보고서 뷰어를 호스트할 div
요소를 body
태그에 추가합니다.
<div id="viewer-host"></div>
viewer-host
요소의 스타일을 head
태그에 추가합니다.
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식 및 rdlx-json
확장자를 사용합니다. 응용 프로그램의 루트 폴더에서 report.rdlx-json
이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.
{
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Viewer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}
viewer-host
요소 바로 뒤의 body
태그에 다음 스크립트를 추가하여 요소가 렌더링된 후 이 스크립트가 실행되도록 합니다. 이 코드는 보고서 뷰어 컴포넌트의 인스턴스를 초기화하고 이전 단계에서 추가한 보고서 템플릿을 엽니다.
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("report.rdlx-json");
</script>
어떤 정적 웹 서버를 사용해도 응용 프로그램을 실행할 수 있습니다. 예를 들어, http-server 패키지가 전역으로 설치된 경우 응용 프로그램의 루트 폴더에서 http-server
명령을 실행할 수 있습니다. localhost(또는 127.0.0.1)에서 실행되는 앱을 열어야 합니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "안녕하세요, ActiveReportsJS 뷰어입니다"라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.