vue项目中Jimu积木报表的打印设计

---

前言

积木报表，是一款免费的数据可视化报表，含报表和大屏设计。这里主要是讲报表的打印设计。利用前必要集成到本身项目中，集成部分请检察官网集成文档。

---

一、vu项目中访问积木报表

若JimuReport已经集成到项目中了，输入访问地址： {项目前缀}/jmreport/list，即可访问。

若必要嵌套到项目中，新建菜单文件Jimu.vue

1. <template>
2.   <div v-loading="loading" :style="'height:' + height">
3.     <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
4.   </div>
5. </template>
6. <script>
7. export default {
8.   name: 'Ureport',
9.   data() {
10.     return {
11.       src: '',
12.       height: document.documentElement.clientHeight - 110 + 'px;',
13.       loading: true
14.     }
15.   },
16.   created() {
17.     this.src = `${项目前缀}/jmreport/list?token=${this.$cookie.get('token')}`
18.   },
19.   mounted() {
20.     setTimeout(() => {
21.       this.loading = false
22.     }, 230)
23.     const that = this
24.     window.onresize = function temp() {
25.       that.height = document.documentElement.clientHeight - 110 + 'px;'
26.     }
27.   },
28.   methods: {
29.   }
30. }
31. </script>

复制代码

二、利用步骤

1.报表详细设计

查阅官网在线文档报表设计器
2.项目中利用

在详细项目中，对多个页面的数据报表都进行预览和导出时。
a. 新建公共预览组件

1. <template>
2.   <el-dialog :title=title :visible.sync=dialogVisible :before-close="closedDialog" width="75%" :append-to-body="true"
3.     v-loading="loading" :close-on-click-modal="false">
4.     <div style="height: 70vh;width: 100%;">
5.       <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
6.     </div>
7.   </el-dialog>
8. </template>
9. <script>
10. export default {
11.   name: 'ReportPrint',
12.   props: {},
13.   data() {
14.     return {
15.       dialogVisible: false,
16.       src: '',
17.       loading: true,
18.       title: ''
19.     }
20.   },
21.   mounted() {
22.     setTimeout(() => {
23.       this.loading = false
24.     }, 230)
25.   },
26.   methods: {
27.     openDialog(title, src) {
28.       this.src = src
29.       this.title = title
30.       this.dialogVisible = true
31.     },
32.     closedDialog() {
33.       this.dialogVisible = false
34.     }
35.   }
36. }
37. </script>
38. <style scoped lang="scss">
39. :deep .el-dialog__body {
40.   padding: 10px !important;
41. }
42. </style>

复制代码

b. 详细页面中利用

1. <template>
2.   <div>
3.     <el-button @click="toPrint" type="primary">导出</el-button>
4.     <ReportPrint ref="jimuReportRef" />
5.   </div>
6. </template>
7. <script>
8.   import ReportPrint from '@/views/components/ReportPrint.vue'
9.   export default {
10.     data() {
11.       return {
12.        jimuReportRef: null
13.        }
14.       },
15.       methods: {
16.         toPrint() {
17.         const title = '报表'
18.         const reprotId = 'XXXXXXX' // 对应报表模板的reprotId
19.         const src = `${项目前缀}/jmreport/view/${reprotId}?token=${this.$cookie.get('token')}`
20.         this.$refs.jimuReportRef.openDialog(title, src)
21.       },
22.     }  
23.   }
24. </script>

复制代码

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。