ActiveReportJS Svelte.js 报表设计器

在 Svelte.js 应用程序中使用 ActiveReportsJS 报表设计器

创建 Svelte 应用程序

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

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

arjs-svelte-designer-app一旦这些命令成功运行，您就可以在您最喜欢的 IDE（例如 Visual Studio Code）中打开新创建的命令。

安装 ActivereportsJS npm 包

我们通过 npm 包提供 Svelte Report Designer 组件@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

SvelteVite.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 file应用程序根文件夹中的并将其内容替换为以下内容：

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 Designer",
        "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-designer.css';
    import {Designer} from "@grapecity/activereports-svelte";
</script>

<div id="viewer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</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、ActiveReportsJS 报表设计器将出现在应用程序的起始页上并显示报表设计。您可以通过添加报表项、设置其属性、创建数据源等来测试基本功能。有关如何使用报表设计器组件的更多信息，请访问报表设计器界面页面报表设计器组件公开了由 TypeScript 声明提供的丰富API，因此您可以在 Svelte 应用程序中轻松使用它。