4.0VUE3 集成设计器加实现按钮求助帖

登录

目前是这样我直接把那个 https://demo.grapecity.com.cn/activereportsjs/demos/features/designer-report-preview/purejs 这里面这个预览报表的代码复制到app.vue里面报这个错

Felix.Li · Felix.Li

您是您可以参考一下这个Demo:

https://gcdn.grapecity.com.cn/showtopic-176151-1-1.html

首先是怎么保存的保存到后端，您可以在onSave或者onSaveAs实现:

这个里面info.definition 就是报表文件。您把这个保存就可以了。
然后report.open不能放url
这个可以直接放一个id，会从public文件下找到，或者直接在这里放报表文件
也就是直接report.open(报表json)就可以打开

testSplit · testSplit

这个复制过来了能启动了但是后台报这个设计界面出不来

Felix.Li · Felix.Li

问题描述:

集成报错，无法正常集成

解决方法：
看您的报错，是引入vue报错。您是不是就没有正常的引入对应的vue，在package.json中引入
引入: "vue": "***"
然后推荐您参考一下这个帖子做一下集成:
https://gcdn.grapecity.com.cn/showtopic-133836-1-4.html
对应的ARJS在package.json中修改即可

testSplit · testSplit

那我VUE3的话怎么操作 V3 好像不用引入这个的把

testSplit · testSplit

<template>
<div id="designer-toolbar" class="container-fluid">
<div class="row mt-3 mb-3">
<button
type="button"
class="btn btn-primary btn-sm col-sm-2 ml-1"
v-on:click="onPdfPreview()"
:style="{display: designerHidden ? 'none' : 'block'}"
>
PDF 预览
</button>
<button
type="button"
class="btn btn-secondary btn-sm col-sm-2 ml-1"
v-on:click="onDesignerOpen()"
:style="{display: designerHidden ? 'block' : 'none'}"
>
打开设计器
</button>
</div>
</div>
<div id="host" style="height:100%;width:100%;margin:10px">
<ReportDesigner ref='reportDesigner'></ReportDesigner>
</div>
</template>
<script>
import {ref, onMounted, watch} from 'vue';
import {Designer as ReportDesigner} from '@grapecity/activereports-vue';
import "@grapecity/activereports-localization/dist/designer/zh-locale";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
import {PdfExport} from "@grapecity/activereports";
export default {
name: 'ActiveReportsDesigner',
// props: {
// reportFile: {
// type: String,
// default: ''
// },
// reportOrientation: {
// type: String,
// default: "Landscape"
// }
// },
components: {ReportDesigner},
setup(context) {
let reportDesigner = ref();
let resolveFunc = ref(null);
let reportStorage = new Map();
let counter = 0;
let designerHidden = ref(false);
const onPdfPreview = () => {
// 在这里定义 onPdfPreview 方法的逻辑
// 例如，在 PDF 预览按钮点击时执行的操作
const reportInfo = reportDesigner.getReport();
console.log('PDF 预览按钮被点击');
const report = new PageReport()
report.load(reportInfo.definition);
const doc = report.run();
const result = PdfExport(doc);
result.download("exportedreport.pdf");
// 可以在这里添加具体的逻辑
};
const onDesignerOpen = () => {
// 在这里定义 onDesignerOpen 方法的逻辑
// 例如，在打开设计器按钮点击时执行的操作
this.designerHidden = false;
console.log('打开设计器按钮被点击');
// 可以在这里添加具体的逻辑
};
onMounted(() => {
reportDesigner = new ReportDesigner("#host", {language: "zh"});
reportDesigner.setActionHandlers({
onRender: async (report)=>{
this.designerHidden = true;
this.$refs.reportViewer.Viewer().open(report.definition);
},
onCreate: () => {
const reportId = `NewReport${counter + 1}`;
counter++;
return Promise.resolve({definition: templates.CPL, id: reportId, displayName: reportId});
},
onOpen: function () {
const ret = new Promise((resolve) => {
resolveFunc.value = resolve;
return ret;
})
},
onSave: (info) => {
const reportId = info.id || `NewReport${counter + 1}`;
this.reportStorage.set(reportId, info.definition);
counter++;
return Promise.resolve({displayName: reportId});
},
onSaveAs: (info) => {
const reportId = `NewReport${counter + 1}`;
this.reportStorage.set(reportId, info.definition);
counter++;
return Promise.resolve({id: reportId, displayName: reportId});
}
});
reportDesigner.setReport({ id: "reports/company-template.rdlx-json" });
})
return {
reportDesigner,
reportStorage,
resolveFunc,
counter,
onPdfPreview,
onDesignerOpen,
designerHidden,
}
},
}
</script>
<style>
#host, #viewer-host {
width: 100%;
height: 500px;
}
</style>

复制代码

现在目前的代码是这样然后报

Bella.Yuan · Bella.Yuan

testSplit 发表于 2023-9-13 18:43
现在目前的代码是这样然后报

问题描述：vite+vue集成按钮有问题

问题解答：

应该是您的代码编写有问题导致的，附件是修改后的，您下载后对比看看。

testSplit · testSplit

我能不能发你附件呀我的demo 有点问题

testSplit · testSplit

Bella.Yuan 发表于 2023-9-14 12:16
问题描述：vite+vue集成按钮有问题

问题解答：

我能不能发你附件呀我的demo 有点问题

Felix.Li · Felix.Li

您可以使用如下操作:

上传好附件之后。

就可以上传附件，建议您将上传附件压缩为zip上传

		自动登录	找回密码
密码			立即注册

[已处理] 4.0VUE3 集成设计器加实现按钮求助帖

最佳答案

16 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

Wyn高级认证

Wyn认证