三分钟在在纯 JavaScript 应用中实现数据透视报表
Posted LanLan_Guo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三分钟在在纯 JavaScript 应用中实现数据透视报表相关的知识，希望对你有一定的参考价值。
1. 创建纯 javascript 应用
使用任意工具创建 html页面。 您可在任何文本编辑器中创建 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>2. 安装 ActivereportsJS
可直接从 CDN 和 NPM 引用 ActiveReportJS ，最简单的方法可直接引用 CDN 链接 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>3. 添加报表 Viewer 宿主元素
body 标签中添加 div 元素
<div id="viewer-host"></div>在 head 标签，添加 viewer-host 元素
<style>
#viewer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
</style>#### 4. 初始化报表Viewer组件
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"
}
]
}
}5. 初始化 报表Viewer组件
将以下脚本添加到body标签中的viewer-host元素之后，以便该脚本在呈现该元素之后运行。此代码初始化报表 Viewer实例，并在页面中加载报表文件。
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("report.rdlx-json");
</script>6. 运行并测试应用程序
您可以使用任何静态Web服务器来运行该应用程序。例如，http-server 包是全局安装的，则可以在应用程序的根文件夹中运行http-server命令来运行项目。确保您打开的地址为localhost（或127.0.0.1）上运行的应用程序。当应用程序启动时，ActiveReportsJS Viewer将出现在页面上。Viewer 将显示显示" Hello,ActiveReportsJS Viewer”文本的报表，您可以通过使用工具栏上的按钮或将报表导出为可用格式来测试基本功能。
以上是关于三分钟在在纯 JavaScript 应用中实现数据透视报表的主要内容，如果未能解决你的问题，请参考以下文章
在纯JaveScript中实现报表导出：从“PDF”到“JPG”
在纯JaveScript中实现报表导出：从“PDF”到“JPG”
在纯JaveScript中实现报表导出：从“PDF”到“JPG”