[]
示例 参考文档 主题编辑器 API文档
立即试用
(Showing Draft Content)

在纯 JavaScript 应用中集成 Report Viewer

创建纯 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>

安装 ActivereportsJS

可直接从 CDN 和 NPM 引用 ActiveReportJS ，最简单的方法可直接引用 CDN 链接 head。

<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-viewer.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-pdf.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-xlsx.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-html.js"></script>

添加报表 Viewer 宿主元素

body 标签中添加 div 元素

<div id="viewer-host"></div>

在 head 标签，添加 viewer-host 元素

<style>
  #viewer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
</style>

初始化 报表Viewer组件

添加脚本代码：

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open({
    Type: "report",
    Body: {
      Name: "Body",
      Type: "section",
      ReportItems: [
        {
          Type: "textbox",
          Name: "textbox1",
          Value: "Hello, ActiveReportsJS Viewer",
          Height: "10in",
        },
      ],
    },
    Name: "Report",
  });
</script>

运行程序

可直接用浏览器打开 HTML 页面查看效果

相关链接