以静态资源文件加载

静态资源文件是 Web应用的资源，不需要网络传输，不需要与其他资源一起压缩或缓存，应用的代码可以使用相对路径引用静态资源，图片和字体是典型的静态资源，如果您是以下场景，推荐使用静态资源：

报表模板不需要经常修改
加载报表前不需要修改
报表模板不需要运行时绑定数据源
可以接受暴露报表模板直接下载

在 Angular 应用中以静态资源的方式加载报表

默认Angular 应用的静态资源配置是放置在 src/assets 文件夹下面的，因此您可以复制报表模板到该文件夹下，并在open 方法中使用相对路径引用，接口说明参考Angular Report Viewer component, 示例代码：

import { Component, ViewChild } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('assets/report.rdlx-json');
  }
}

更多信息参考在 Angular 组件中使用报表 Viewer。

Loading reports as static assets in a React application

创建 React App 也可以让开发者加载静态资源静态资源在public 文件夹。因此，您可以直接复制报表文件到public文件夹，并在React Report Viewer 组件的report属性使用相对路径引用。示例代码:

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

更多信息参考在 React 组件中加载报表。

也可以使用 viewer.open 方法中调用报表模板:

function App() {
  const viewerRef = React.useRef<Viewer>(null);
  React.useEffect(() => {
    const viewerInstance = viewerRef.current.Viewer;
    viewerInstance.open('report.rdlx-json');
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
};

也可以参考加载报表示例来了解具体使用。

在 Vue 应用中以静态资源的方式加载报表

Vue CLI 允许开发者将静态资源放在 public 文件夹下面。因此可以将报表模板复制到 public 文件夹，可以使用 report 属性来指定加载的报表对象，对象说明参考：Vue Report Viewer component，示例代码：

<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>

更多信息参考在 Vue 项目中加载报表。也可以使用 viewer.open 方法：

<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";


export default {
  name: "App",
  components: {
    JSViewer: Viewer
  },
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    viewer.open('report.rdlx-json');
  }
};

点击在线示例查看具体引用。

在纯 JavaScript 中加载报表

在该应用中，您可以将报表模板放置在任何的应用文件夹中，并在JavaScript Report Viewer componentopen 方法中设置相对路径，示例代码：

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>

更多信息参考在纯 JavaScript 应用中使用报表Viewer。