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

报表 Viewer UI 定制

ActiveReportsJS 提供了丰富的API，来使得开发人员来完成Viewer布局的调整或者指定的功能：

设置工具栏布局

ActiveReportJS Viewer 有三种样式的工具栏:

  • 默认布局 -会包含最全的按钮。

  • 全屏 - 全屏模式查看报表

  • 移动端布局 -适用于移动端设备展示报表

默认情况下，不同的布局样式均包含以下项目。

按钮 ID

描述

$navigation

转到第一页，转到上一页，页码/总页数，转到下一页，转到最后一页按钮

$split

分隔符

$refresh

更新报表按钮

$history

返回上级报表

$zoom

缩放模式

$fullscreen

切换全屏模式按钮

$print

打印按钮

$singlepagemode

切换到单页模式按钮

$continuouspagemode

切换到连续页面模式按钮

$galleymode

切换画廊模式

您可以使用 Viewer 的Toolbar 属性的updateLayout 方法。


以下是在 React 应用中使用该方法来更新 "缩放" "全屏" 及 "打印" 按钮。

import { Viewer } from "@grapecity/activereports-react";

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef < Viewer > null;

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateLayout({
      default: ["$zoom", "$split", "$fullscreen", "$split", "$print"],
      fullscreen: ["$fullscreen", "$split", "$print"],
      mobile: ["$navigation"],
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};

可参考在线示例

更新工具栏默认行为

Viewer控件的Toolbar 属性提供了updateItem。可以在React，和Angular及 Vue 框架中使用该方法来重新工具栏按钮的默认行为。 例如，如果您想在客户点击打印报表时，将该数据传给服务器并在服务器进行分析。该示例展示了在 React应用中使用API，同样也适用于Angular，Vue框架

import { Viewer } from "@grapecity/activereports-react";

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef < Viewer > null;

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateItem("$print", {
      action: function () {
        ga("send", {
          hitType: "event",
          eventCategory: "action",
          eventAction: "print",
          eventLabel: "report",
        });
        viewerInstance.print();
      },
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};

添加或移除按钮

Viewer的toolbar 属性提供了addItem 和 removeItem 方法可用来添加或移除自定义的按钮 。可参考示例：在线示例

隐藏工具栏和侧边栏

Viewer 提供了toolbarVisible 和 sidebarVisible 属性可以隐藏默认的工具栏和侧边栏。 具体使用可参考 API.

相关资源