本帖最后由 Bella.Yuan 于 2023-9-11 13:40 编辑
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、运行测试在开发模式下运行应用程序，执行以下命令：
附件是对应的demo。
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图