AR.NET과의 호환성
OBSOLETE * 지원되는 보고서 유형은 .json입니다. * 이전 형식(.rdlx)과 보고서 컨트롤의 상태 호환성 * AR.NET와 ARJS 간 기능 비교표
ARJS는 npm에서 표시되며, 모든 npm 패키지와 마찬가지로 사용하려면 NodeJS를 컴퓨터에 설치해야 합니다.
설치
최신 ARJS 릴리스 버전은 NodeJS 명령 프롬프트에서 다음 명령을 실행하여 npm에서 설치할 수 있습니다.
npm install @grapecity/arjs.purejs.all
이렇게 하면 순수 JavaScript 모듈이 모두 설치됩니다. 다른 프레임워크에 대한 지원 또는 특정 컨트롤 모듈을 설치하려면 npm 참조를 참조하십시오.
응용 프로그램에 ARJS 추가
먼저, 응용 프로그램에 호스트 요소를 추가하고 호스트 요소에 ID를 지정합니다.
<div id="hostElement"></div>
ARJS 패키지에는 CommonJS 형식의 JavaScript 모듈이 포함되어 있습니다. 해당 모듈은 Webpack 번들러 또는 SystemJS 런타임 모듈 로더와 같은 모듈을 로드할 수 있는 도구와 함께 사용할 수 있습니다.
TypeScript 또는 Babel에서 지원하는 응용 프로그램으로 ARJS 모듈을 가져오려면 ES2015 import 문을 사용할 수 있습니다. import 문의 모든 모듈 이름은 접두사 **"@grapecity/"**로 시작하고 그 뒤에 모듈 이름이 와야 합니다.
CDN에서 ActiveReportsJS 참조
ActiveRportsJS 패키지 역시 CDN에 게시됩니다. 이 경우에는 다운로드할 항목이 없습니다. HTML 페이지에 다음 줄만 추가하면 됩니다.
CDN LINKS UNAVAILABLE
<link href="https://cdn.grapecity.com/wijmo/5.20191.603/styles/wijmo.min.css" rel="stylesheet"/>
<head>
<title>Export from custom buttons added on viewer toolbar</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
<script type="text/javascript" src="scripts/ie-polyfills.js"></script>
<script type="text/javascript" src="scripts/ar-js-core.js"></script>
<script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
<script type="text/javascript" src="scripts/ar-js-html.js"></script>
<link rel="stylesheet" type="text/css" href="css/ar-js-viewer.css">
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 600px ;width: 100%"></div>
<script>
function load() {
viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
// open rdlx-json file in viewer
viewer.open('/reports/InvoiceList.rdlx-json');
}
</script>
</body>
### Using Traditional HTML
1. Create an Empty ASP.Net Web Application.
2. Add an HTML Page to your project.
3. Create '`scripts`' folder in your project's root and include following ActiveReportsJS scripts:
* ar-js-core.js
* ar-js-viewer.js
To add export functionality, add following additional scripts:
* ar-js-pdf.js
* ar-js-xlsx.js
* ar-js-html.js
4. Create '`css`' folder in your project's root and include `ar-js-viewer.css` stylesheet.
5. Create '`reports`' folder and include the report you want to view.
6. Modify the content of the added HTML Page to
* add necessary references of the viewer scripts and css styles,
* load React scripts,
* add _div_ element to host the viewer (it requires container height to be defined),
* create a react viewer component,
* open the report in viewer using [viewer.open()](@Api/classes/viewer.viewer-1.html#open) method and,
* render the component.
The content of the HTML Page is as shown.
```xml
<html>
<head>
<meta charset="UTF-8" />
<title>ActiveReportsJS Viewer in React</title>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link href="css/ar-js-viewer.css" rel="stylesheet" />
<script src="scripts/ar-js-core.js"></script>
<script src="scripts/ar-js-viewer.js"></script>
</head>
<body>
<div id="ARJSviewerDiv" style="height:100%"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
var viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.open("reports/InvoiceList.rdlx-json");
}
render() {
return (
<div ref="ARJSviewerDiv">
</div>)
}
}
ReactDOM.render(
<App />,
document.getElementById('ARJSviewerDiv')
);
</script>
</body>
</html>
- 브라우저에서 HTML 페이지를 봅니다.