与 Svelte.js 框架集成报表Viewer

在 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 包

n我们通过 npm 包提供 Svelte Report Viewer 组件@grapecity/activereports-svelte。该软件包建立在基础@grapecity/activereports软件包的基础上，其中包含组件操作所必需的核心功能。

要安装最新版本的@grapecity/activereports-svelte软件包及其必要的依赖项，请从应用程序的根目录执行以下命令：

npm install @grapecity/activereports-svelte@latest
# or if you use yarn
yarn add @grapecity/activereports-svelte@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"
      }
    ]
  }
}

将报表查看器组件添加到应用程序

将文件的默认内容替换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-svelte";
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</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。您可以使用报表查看器用户界面来测试基本功能。报表查看器组件公开了由 TypeScript 声明提供的丰富 API，因此您可以在 Svelte 应用程序中轻松使用它。