ARJS4.0版本在 Vite.js（Vue） 应用中集成 ActiveReportsJS 报表

ARJS4.0版本在 Vite.js（Vue） 集成 ActiveReportsJS 报表步骤：
1、创建 Vite.js Vue 应用

npm create vite@latest my-vue-app -- --template vue

2、安装 ActivereportsJS npm 包

npm install @grapecity/activereports-vue

3、配置 Vite.js

为了保证 ActiveReportsJS 能够在 Vite.js Vue应用中正常运行，需要在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 { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'
import path from "path";


export default defineConfig({
  plugins: [vue()],
  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"
        ),
      },
    ],
  },
});

4、导入 ActiveReportsJS 样式
打开src\style.css文件并使用以下代码替换内容：
Viewer:

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";


#viewer-host {
  width: 100%;
  height: 100vh;
}

Designer:

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-designer.css";

#designer-host {
  width: 100%;
  height: 100vh;
}

5、创建 ActiveReportsJS 报表

ActiveReportsJS 报表本质是 [color=var(--link-color)]JSON 格式 ，并以 rdlx-json 为报表文件的后缀名。

在根路径下(这里路径可以根据实际进行修改)，创建新的文件并命名为 report.rdlx-json （对应的报表内容也可以修改，下面的只是个示例）并输入以下代码：

{

  "Name": "Report",

  "Body": {

    "ReportItems": [

      {

        "Type": "textbox",

        "Name": "TextBox1",

        "Value": "Hello, ActiveReportsJS Viewer",

        "Style": {

          "FontSize": "18pt"

        },

        "Width": "8.5in",

        "Height": "0.5in"

      }

  }

}

6、项目中添加 React 报表 Viewer 组件
打开src\App.vue 文件并输入以下代码：
Viewer：

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

Designer：

<template>
  <div id="designer-host">
    <JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>
  </div>
</template>


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


export default {
  name: "App",
  components: {
    JSDesigner: Designer,
  },
};
</script>

7、运行测试

在开发模式下运行应用程序，执行以下命令：

npm run dev

附件是对应的demo。

好懵弄得 我里面的文档又有点用react的

testSplit 发表于 2023-9-12 19:57
好懵弄得 我里面的文档又有点用react的

您好，下面的链接是vit+react的，其实就是框架不一样，所以引用的东西不一样，您可以参考一下vit+react的：
https://demo.grapecity.com.cn/ac ... A%A5%E8%A1%A8viewer
如果还是有问题，建议您到求助中心开个帖子，我们在您的帖子具体交流~