[]
        
(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,和AngularVue 框架中使用该方法来重新工具栏按钮的默认行为。 例如,如果您想在客户点击打印报表时,将该数据传给服务器并在服务器进行分析。该示例展示了在 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 属性提供了addItemremoveItem 方法可用来添加或移除自定义的按钮 。可参考示例:在线示例

隐藏工具栏和侧边栏

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

相关资源