vue项目中Jimu积木报表的打印设计
前言积木报表，是一款免费的数据可视化报表，含报表和大屏设计。这里主要是讲报表的打印设计。利用前必要集成到本身项目中，集成部分请检察官网集成文档。
一、vu项目中访问积木报表
若JimuReport已经集成到项目中了，输入访问地址： {项目前缀}/jmreport/list，即可访问。
https://i-blog.csdnimg.cn/direct/47a5920a29b740d1aa5d7e8279f84b88.png
若必要嵌套到项目中，新建菜单文件Jimu.vue
<template>
<div v-loading="loading" :style="'height:' + height">
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
</div>
</template>
<script>
export default {
name: 'Ureport',
data() {
return {
src: '',
height: document.documentElement.clientHeight - 110 + 'px;',
loading: true
}
},
created() {
this.src = `${项目前缀}/jmreport/list?token=${this.$cookie.get('token')}`
},
mounted() {
setTimeout(() => {
this.loading = false
}, 230)
const that = this
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 110 + 'px;'
}
},
methods: {
}
}
</script>
二、利用步骤
1.报表详细设计
查阅官网在线文档报表设计器
2.项目中利用
在详细项目中，对多个页面的数据报表都进行预览和导出时。
a. 新建公共预览组件
<template>
<el-dialog :title=title :visible.sync=dialogVisible :before-close="closedDialog" width="75%" :append-to-body="true"
v-loading="loading" :close-on-click-modal="false">
<div style="height: 70vh;width: 100%;">
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
</div>
</el-dialog>
</template>
<script>
export default {
name: 'ReportPrint',
props: {},
data() {
return {
dialogVisible: false,
src: '',
loading: true,
title: ''
}
},
mounted() {
setTimeout(() => {
this.loading = false
}, 230)
},
methods: {
openDialog(title, src) {
this.src = src
this.title = title
this.dialogVisible = true
},
closedDialog() {
this.dialogVisible = false
}
}
}
</script>
<style scoped lang="scss">
:deep .el-dialog__body {
padding: 10px !important;
}
</style>
b. 详细页面中利用
<template>
<div>
<el-button @click="toPrint" type="primary">导出</el-button>
<ReportPrint ref="jimuReportRef" />
</div>
</template>
<script>
import ReportPrint from '@/views/components/ReportPrint.vue'
export default {
data() {
return {
jimuReportRef: null
}
},
methods: {
toPrint() {
const title = '报表'
const reprotId = 'XXXXXXX' // 对应报表模板的reprotId
const src = `${项目前缀}/jmreport/view/${reprotId}?token=${this.$cookie.get('token')}`
this.$refs.jimuReportRef.openDialog(title, src)
},
}
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]