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

文章目录

前言

积木报表，是一款免费的数据可视化报表，含报表和大屏设计。这里主要是讲报表的打印设计。使用前需要集成到自己项目中，集成部分请查看官网集成文档。

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

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

若需要嵌套到项目中，新建菜单文件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>exportdefault{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=functiontemp(){
      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>exportdefault{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'exportdefault{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>