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>
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>

---