与 Svelet.js 框架集成报表Viewer

本章节主要提供ActiveReportsJS报表查看器组件的详细概述，介绍在 Svelte.js 应用中如何展示ActiveReportsJS 报表。

创建 Svelte 应用程序

创建Svelte应用程序的最简单方法是使用SvelteKit工具。从命令提示符或终端运行以下命令：

npm create svelte@latest arjs-svelte-viewer-app

它会问几个问题，并在推荐答案列表下方:

√ Which Svelte app template? » Skeleton project
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ Add ESLint for code linting? » No
√ Add Prettier for code formatting? » Yes
√ Add Playwright for browser testing? » No
√ Add Vitest for unit testing? » No

命令成功运行后，您可以arjs-svelte-viewer-app在您喜欢的 IDE（例如 Visual Studio Code）中打开新创建的。

安装 ActivereportsJS npm 包

npm@grapecity/activereports包包含可以集成到 Svelte 应用程序中的纯组件。 ActiveReportsJS Report Viewer

要安装此软件包的最新版本，请从应用程序的根文件夹运行以下命令。

npm install @grapecity/activereports@latest
# or if you use yarn
yarn add @grapecity/activereports@latest

配置 Vite.js

Svelte 在底层使用 Vite.js 以开发模式运行应用程序并构建它们以用于生产。为了让 ActiveReportsJS 与 Vite.js 一起工作，我们需要调整 Vite.js 配置。在应用程序的根目录中创建一个名为的新文件alias.js并添加以下代码：

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

然后打开vite.config.js应用程序根文件夹中的文件并将其内容替换为以下内容：

import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
};
export default config;

将 ActiveReportsJS 报告添加到应用程序

ActiveReportsJS 使用报告模板文件的JSON格式和rdlx-json扩展名。

在static应用程序的文件夹中，创建一个名为的新文件report.rdlx-json并将以下内容插入其中。

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt",
          "PaddingLeft": "5pt",
          "PaddingTop": "5pt"          
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

将 Report Viewer 组件添加到应用程序

src\routes+page.svelte用以下代码替换文件的默认内容

<script lang="ts">
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-viewer.css";    
    import {Viewer} from "@grapecity/activereports/reportviewer";
    import {PdfExport, HtmlExport, TabularDataExport} from "@grapecity/activereports";
    import { onMount } from 'svelte';
   
    onMount(() => {
        let viewer = new Viewer("#viewer-host");
        viewer.open("report.rdlx-json");
    });
</script>

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

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

禁用服务器端渲染

默认情况下，SvelteKit 将首先在服务器上呈现任何页面，然后将其作为 HTML 发送到客户端。但 ActiveReportsJS 只能在客户端运行。因此，我们需要为包含报表查看器的页面禁用服务器端呈现。我们可以通过将+page.js具有以下内容的文件添加到+page.svelte

export const prerender = false;
export const ssr = false;

运行和测试应用程序

您可以使用yarn run dev或npm run dev命令运行应用程序。默认情况下，该项目在http://localhost:5173/运行。

如果您浏览此 URL，ActiveReportsJS 报表查看器将出现在页面上。查看器将显示显示文本的报告Hello, ActiveReportsJS Viewer。您可以使用报表查看器用户界面测试基本功能。Report Viewer 组件公开了随 TypeScript 声明一起提供的丰富 API，因此您可以在 Svelte 应用程序中轻松使用它。