my-japanese-npm-project
v1.0.13
Published
____
Downloads
5
Readme
English | 日本語 | 中文 | 한국어
ActiveReportsJS
A Complete JavaScript Reporting Tool for Enterprise Applications.
ActiveReportsJS is a powerful reporting tool for web applications that allows developers and report authors to easily design and display reports within their applications. With a wide range of features, such as drill-down, runtime data filtering, and parameter-driven reports, as well as compatibility with popular frameworks such as Angular, React, and Vue, ActiveReportsJS simplifies the process of creating and managing reports, enabling developers to enhance their applications' capabilities and deliver valuable insights to end-users.
The ActiveReportsJS suite includes both a Report Viewer and Report Designer component. The Viewer allows end-users to view and interact with reports, while the Designer enables developers to design and customize reports, either within the same web application or by using the Standalone Report Designer.
Installation
To install the latest release version:
npm install @grapecity/activereports
To install a specific version:
npm install @grapecity/activereports@{VersionNumber}
Documentation
For more information on how to use ActiveReportsJS, online documentation can be found here:
Samples
To quickly jump in with ActiveReportsJS, check out our Demo Gallery. You can also easily create custom themes using the on-line Theme Editor.
Licensing
Read more about ActiveReportsJS Licensing.
ActiveReportsJS JP
ActiveReportsJSは、モダンなWebアプリケーションに帳票出力機能を組み込めるJavaScriptコントロールです。帳票の外観デザインの設定からデータ接続、印刷、PDFやExcelへの出力まで、Web帳票開発に必要な機能が揃っています。
サンプル
ActiveReportsJSチュートリアルデモでは、ActiveReportsJSを使用したアプリケーションの作成方法や、各コントロールの基本機能、実用的なアプリケーションの例などを紹介しています。
また、トライアル版をダウンロードして、実際の機能や動作をご確認いただけます。
インストール方法
npm install @grapecity/activereports日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
ドキュメント
製品の各種ドキュメントは、下記をご参照ください。
製品情報
製品の詳細や価格、ライセンスについては、下記をご参照ください。 https://developer.mescius.jp/activereportsjs
サポート
ヘルプやデモに加え、ナレッジベースでは製品の技術情報を公開しております。また、サブスクリプションをご契約中のお客様は、E-mailによる技術サポートをご利用いただけます。
ActiveReportsJS CN
ActiveReportsJS 是一个轻量级的报表解决方案，为您提供简单易用的丰富的 API ，创建复杂报表，轻松集成到您的项目重 为了满足常用的报表布局需求，不需要依赖于服务端。
ActiveReportsJS支持以下报表类型："页面" 和"RDL 报表"。
安装
使用命令 npm install @grapecity/activereports 安装 ActiveReportsJS
产品资料
示例
入门指南 - 创建第一个 ActiveReportsJS Viewer 应用
操作步骤
- 在
index.htmlhead 标签内添加dist文件夹中的 js 文件的引用，ar-js-core.js、ar-js-viewer.js及styles文件夹中的css文件ar-js-viewer.css、ar-js-ui.css:
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css">
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>- 如果需要支持导出按钮， 需要添加
ar-js-pdf.js,ar-js-html.js,ar-js-tabular-data.js及ar-js-xlsx.jsdist文件夹的引用:
<script src="./node_modules/@grapecity/activereports/dist/ar-js-pdf.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-html.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-xlsx.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-tabular-data.js"></script>- 在
index.htmlbody 标签内声明 div 用于展示 ActiveReportsJS Viewer。 注意, 必须要定义height属性:
<div id="root" style="height: 100vh"></div>- 在
index.htmlbodyonload事件中添加以下脚本:
<body onload="loadViewer()">
<script>
function loadViewer() {
var viewer = new ActiveReports.Viewer('#root');
viewer.open({
"Name": "Report",
"Type": "report",
"Body": {
"Name": "Body",
"Type": "section",
"ReportItems": [
{ Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Top: "3in", Left: "3in", Height: "1in" }
]
}
});
}
</script>
<div id="root" style="height: 100vh"></div>
</body>设计器
我们 ActiveReportsJS Designer。下载设计器
ActiveReportsJS 提供了极其易用的设计器，助您快速创建和修改报表文件，并且提供了两种平台的设计器，1.Electron 桌面设计器,提供了 Windows,Mac,Linux 三个版本的设计器报表设计器。
或者使用在Web项目中使用 ActiveReportsJS Designer 控件集成在线设计器。 以下示例将演示如何将设计器集成到 Web项目中
第一个 ActiveReportsJS 设计器 纯前端应用
步骤
- 初始化存储库
npm init - 安装所需的组件
npm install @grapecity/activereports - 创建
index.html页面，添加 ActiveReportsJS 需要的引用ar-js-core.js,ar-js-designer.js及样式文件ar-js-designer.css,ar-js-ui.css。
<html lang="en">
<head>
<title>ActiveReportsJS Designer</title>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css" type="text/css">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-designer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-designer.js"></script>
</head>
<body></body>
</html>- 在
index.html页面中body区域中添加div，作为ActiveReportsJS Designer的宿主元素。 注意必须要指定该div的高度，否则设计器无法显示完全。
<div id="designer" style="height: 100vh;"></div>- 在
index.html实现body的onload事件，并添加以下代码，实现在页面初始化时，加载设计器
<body onload="loadDesigner()">
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
}
</script>
<div id="designer" style="height: 100vh;"></div>
</body>- 用浏览器打开
index.html页面，就可以看到设计器。
为设计器添加预览功能，即添加 ActiveReportsJS Viewer组件实现预览
- 添加
ar-js-viewer.js文件及ar-js-core.js及相关css文件 (在js文件添加完成后)。
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>- 添加 div 宿主元素ActiveReportsJS Viewer。 注意需要定义容器高度。
<div id="viewer" style="height: 100vh;display:none"></div>- 添加其他引用 (协助预览功能)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>- 初始化Viewer，并在工具栏中添加返回按钮，编写 Handler执行预览方法： (更多信息请参考 Documentation 或 API reference ).
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
const viewer = new GC.ActiveReports.ReportViewer.Viewer("#viewer");
///specify and add back button to viewer
var backbutton = {
key: '$backbutton',
iconCssClass: 'mdi mdi-backburger',
enabled: true,
action: function(item){
$("#designer").toggle();
$("#viewer").toggle();
}
}
viewer.toolbar.addItem(backbutton);
//describe onRender method
var onRender = (reportInfo) => {
$("#designer").toggle();
$("#viewer").toggle();
viewer.open(reportInfo.definition);
}
designer.setActionHandlers({
onRender: onRender
});
}
</script>
- 在浏览器打开
index.html页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。
ActiveReportsJS KR
- 액티브리포츠JS (ARJS)는 자바스크립트로 만들어진 고성능 프론트엔드 리포팅 솔루션입니다. 웹과 모바일을 모두 지원하고 서버에 의존도가 없기 때문에 쉽고 빠르게 솔루션을 도입하실수 있습니다.
- "Page"와 "RDL" 형태의 리포트 타입을 지원하고 있습니다.
설치
다음을 사용하여 모든 ActiveReportsJS 자바 스크립트 구성 요소를 설치할 수 있습니다. npm install @grapecity/activereports
도움말
ActiveReportsJS 사용 방법 및 도구에 대한 자세한 내용은 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.
데모
ActiveReportsJS 뷰어
첫 번째 ActiveReportsJS 뷰어 어플리케이션 만들기
과정
index.html의 헤드섹션에dist폴더의ar-js-core.js와ar-js-viewer.js에 대한 참조를 추가하고styles폴더에서ar-js-viewer.css와ar-js-ui.css에 대한 참조를 추가합니다 :
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css">
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>- 만일 내보내기 기능이 필요하다면,
index.html의 헤드 섹션에dist폴더에 있는ar-js-pdf.js,ar-js-html.js,ar-js-tabular-data.js또는ar-js-xlsx.js에 대한 참조를 각각 필요에 따라 추가합니다 :
<script src="./node_modules/@grapecity/activereports/dist/ar-js-pdf.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-html.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-xlsx.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-tabular-data.js"></script>index.html의 바디 섹션에서 ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :
<div id="root" style="height: 100vh"></div>index.html에서 뷰어를 로드하고 onload 이벤트에 이를 구독하는 스크립트를 추가합니다 :
<body onload="loadViewer()">
<script>
function loadViewer() {
var viewer = new ActiveReports.Viewer('#root');
viewer.open({
"Name": "Report",
"Type": "report",
"Body": {
"Name": "Body",
"Type": "section",
"ReportItems": [
{ Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Top: "3in", Left: "3in", Height: "1in" }
]
}
});
}
</script>
<div id="root" style="height: 100vh"></div>
</body>ActiveReportsJS 디자이너
보고서를 만들거나 수정하려면 Win, MacOS 또는 Linux용 **ActiveReportsJS 디자이너 어플리케이션**를 사용하시거나, 또는 아래의 ActiveReportsJS 디자이너 컴포넌트를 사용하시서 웹 상에서 직접 최종사용자에게 제공할 수도 있습니다.
첫 번째 ActiveReportsJS Designer 애플리케이션 만들기
과정
- 빈 저장소 초기화
npm init - 필수 컴포넌트 설치
npm install @grapecity/activereports index.html만들어 라이브러리에서ar-js-core.js,ar-js-designer.js에 대한 참조를 추가하고ar-js-designer.css,ar-js-ui.css에 대한 참조도 추가합니다.
<html lang="en">
<head>
<title>ActiveReportsJS Designer</title>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css" type="text/css">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-designer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-designer.js"></script>
</head>
<body></body>
</html>index.html의 바디 섹션에서 ActiveReportsJS 디자이너를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :
<div id="designer" style="height: 100vh;"></div>index.html에서 디자이너를 로드하고 onload 이벤트에 이를 구독하는 스크립트를 추가합니다 :
<body onload="loadDesigner()">
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
}
</script>
<div id="designer" style="height: 100vh;"></div>
</body>index.html를 브라우저에서 열고 보고서를 디자인 합니다.
ActiveReportsJS 뷰어를 사용하여 보고서 미리보기 기능 추가
- 디자이너에서 미리보기를 추가하려면
ar-js-viewer.js에 대한 참조를 추가하고 그에 해당하는 CSS에 대한 참조도 추가해주셔야 합니다.(ar-js-core.js참조 아래 부분에 추가).
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>- ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :
<div id="viewer" style="height: 100vh;display:none"></div>- 헤드 섹션에 추가적인 참조 추가 (미리보기 구성에 도움)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>- 뷰어를 초기화하고 도구 모음에 뒤로 버튼을 추가한후 미리보기 메서드에 대한 핸들러를 작성합니다. (뷰어와 디자이너 사용법에 대한 자세한 내용은, 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.)
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
const viewer = new GC.ActiveReports.ReportViewer.Viewer("#viewer");
///specify and add back button to viewer
var backbutton = {
key: '$backbutton',
iconCssClass: 'mdi mdi-backburger',
enabled: true,
action: function(item){
$("#designer").toggle();
$("#viewer").toggle();
}
}
viewer.toolbar.addItem(backbutton);
//describe onRender method
var onRender = (reportInfo) => {
$("#designer").toggle();
$("#viewer").toggle();
viewer.open(reportInfo.definition);
}
designer.setActionHandlers({
onRender: onRender
});
}
</script>
- 브라우저에서 'index.html' 페이지를 열고 디자인 화면에 컨트롤을 추가한후 '미리보기'를 클릭하여 디자인된 보고서를 미리 볼수 있습니다.