我把报表展示页面参考文档实现：https://demo.grapecity.com.cn/ac ... data-binding/purejs
我展示时，通过弹框展示打印预览页面。
要实现的页面为：
但是每次打开，组件的工具类显示总是出现问题。下面截图是我出现的问题。但是当我先打开报表设计页面，再打开预览页面就显示正常了（如上图），此时如果清空缓存重新打开预览页面，仍然会出现下图的问题
弹出框组件为
- <template>
- <z-modal
- v-model="modelIsOpen"
- :title="title"
- width="1240"
- :mask-closable="false"
- :closable="false"
- >
- <div id="viewer-host">
- <Viewer ref="reportViewer"></Viewer>
- </div>
- <div slot="footer" class="ilead-modal-footer">
- <z-button @click="handleCancel">取消</z-button>
- </div>
- </z-modal>
- </template>
- <script>
- import api from './api/index'
- import { Viewer } from '@grapecity/activereports-vue'
- import '@grapecity/activereports-localization/dist/ar-js-locales'
- import '@grapecity/activereports-localization/dist/designer/zh-locale' // 中文包
- import '@grapecity/activereports-localization'
- export default {
- name: 'arjsView',
- components: {
- Viewer: Viewer,
- },
- data() {
- return {
- pkId: '', // 打印模板主键，调用组件时传值（可以传主键或编码）
- printTemplateCode: '', // 打印模板编码，调用组件时传值（可以传主键或编码）
- modelIsOpen: false,
- show: false,
- title: '',
- jsonDataArr: [],
- viewer: '',
- templateStr: '', // 模板字符串
- }
- },
- mounted() {
- let that = this
- that.viewer = that.$refs.reportViewer.Viewer('#root', { language: 'zh' })
- that.viewer.open('arjsDemo.rdlx-json')
- that.viewer.toggleSidebar(false)
- },
- methods: {
- // 加载 模板数据
- async getPrintTemplate() {
- let that = this
- let param = {
- pkId: that.pkId,
- printTemplateCode: that.printTemplateCode,
- }
- let res = await api.getPrintTemplate(param)
- if (res.data.code === '01') {
- that.templateStr = res.data.data
- } else {
- that.$Message.error(res.data.message)
- }
- },
- // 调用组件时，加载数据
- async openPrintTemplate() {
- let that = this
- // 校验是否传入了要打印的数据
- if (!!!that.jsonDataArr || that.jsonDataArr.length < 1) {
- that.$Message.warning('请选择要打印的数据')
- return
- }
- // 获取打印模板
- await that.getPrintTemplate()
- // 将打印模板数据转换为 JSON 格式
- let templateJson = JSON.parse(that.templateStr)
- // 将参数添加到模板中
- for (let i = 0; i < that.jsonDataArr.length; i++) {
- templateJson.DataSources[i].ConnectionProperties.ConnectString =
- 'jsondata=' + JSON.stringify(that.jsonDataArr[i])
- }
- that.show = true
- // that.viewer = that.$refs.reportViewer.Viewer()
- that.viewer.open(templateJson)
- // that.viewer.open('arjsDemo.rdlx-json')
- // 预览页面，侧边按钮隐藏
- that.viewer.toggleSidebar(false)
- },
- // 取消功能
- handleCancel() {
- this.modelIsOpen = false
- },
- },
- }
- </script>
- <style>
- #viewer-host {
- width: 100%;
- height: 100%;
- }
- </style>
组件调用方式为：
- printBtn() {
- let selectRecords = this.$refs.xTable.getCheckboxRecords()
- if (!!!selectRecords || selectRecords.length < 1) {
- this.$Message.warning('请选择要打印的数据')
- return
- }
- this.$refs.arjsView.modelIsOpen = true
- this.$refs.arjsView.title = '条码打印预览'
- this.$refs.arjsView.printTemplateCode = 'stock-barcode-print'
- let jsonDataArr = []
- jsonDataArr.push(selectRecords)
- this.$refs.arjsView.jsonDataArr = jsonDataArr
- this.$refs.arjsView.openPrintTemplate()
- console.log('调用打印接口', selectRecords)
- },
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
