@grapecity-software/activereportsjs
Advanced tools
ActiveReportsJS 是一个轻量级的报表解决方案，为您提供简单易用的丰富的 API ，创建复杂报表，轻松集成到您的项目重 为了满足常用的报表布局需求，不需要依赖于服务端。
ActiveReportsJS支持以下报表类型："页面" 和"RDL 报表"。
使用命令 npm install @grapecity-software/activereportsjs 安装 ActiveReportsJS
index.html head 标签内添加 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-software/activereportsjs/styles/ar-js-ui.css">
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity-software/activereportsjs/styles/ar-js-viewer.css">
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-viewer.js"></script>
ar-js-pdf.js, ar-js-html.js, ar-js-tabular-data.js 及 ar-js-xlsx.js dist 文件夹的引用: <script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-pdf.js"></script>
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-html.js"></script>
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-xlsx.js"></script>
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-tabular-data.js"></script>
index.html body 标签内声明 div 用于展示 ActiveReportsJS Viewer。 注意, 必须要定义height属性: <div id="root" style="height: 100vh"></div>
index.html body onload 事件中添加以下脚本:<body onload="loadViewer()">
<script>
function loadViewer() {
var viewer = new GCCN.ActiveReportsJS.ReportViewer.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项目中
npm initnpm install @grapecity-software/activereportsjsindex.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-software/activereportsjs/styles/ar-js-ui.css" type="text/css">
<link rel="stylesheet" href="./node_modules/@grapecity-software/activereportsjs/styles/ar-js-designer.css" type="text/css">
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity-software/activereportsjs/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 GCCN.ActiveReportsJS.ReportDesigner.Designer("#designer");
}
</script>
<div id="designer" style="height: 100vh;"></div>
</body>
index.html 页面，就可以看到设计器。ar-js-viewer.js 文件及 ar-js-core.js及相关css文件 (在js文件添加完成后)。<link rel="stylesheet" href="./node_modules/@grapecity-software/activereportsjs/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@grapecity-software/activereportsjs/dist/ar-js-viewer.js"></script>
<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"/>
<script>
function loadDesigner(){
const designer = new GCCN.ActiveReportsJS.ReportDesigner.Designer("#designer");
const viewer = new GCCN.ActiveReportsJS.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 页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。FAQs
ActiveReportsJS
The npm package @grapecity-software/activereportsjs receives a total of 16 weekly downloads. As such, @grapecity-software/activereportsjs popularity was classified as not popular.
We found that @grapecity-software/activereportsjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A malicious .NET package is typosquatting the Braintree SDK to steal live payment card data, merchant API keys, and host secrets from production apps.
Security News
/Research
Compromised Injective SDK npm version 1.20.21 exfiltrates wallet private keys and mnemonics through fake telemetry functionality.
Security News
npm v12 is generally available, turning install scripts off by default and beginning the deprecation of 2FA-bypass publishing tokens.