vue+element UI 学习总结笔记(五)_vue嵌入iframe

vue 同时被 2 个专栏收录
13 篇文章 1 订阅
10 篇文章 1 订阅

 我们项目中,报表是独立的服务,通过iframe嵌入到vue页面中。代码如下:

<!-- pjpccx   票据盘存查询 -->
<template>
  <div class="pjpccx">
    <toolBar :client-butns-array="clientButnsArray.concat(addclientButnsArray)" />
    <!-- <h1 class="title_color">{{ title }}</h1> -->
    <h1 class="title_color cs"> {{ $route.meta.title }} </h1>
    <!-- {{ addclientButnsArray[0] }} -->
    <iframe ref="iframe" :src="urlPath" class="iframe" frameborder="0" scrolling="yes" name="iframe" seamless>您的浏览器版本过低,无法显示报表内容!建议升级浏览器或更换浏览器!</iframe>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/utils/Bus'
import toolBar from '@/components/toolBar'
import { getToken } from '@/utils/auth' // 验权

export default {
  components: {
    toolBar // 上方工具条栏
  },
  props: {
    addclientButnsArray: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      title: this.$route.meta.title,
      // reportPrint/reportExport
      // clientButnsArray: ['close', 'reportRefresh', 'reportClear'] // 这里填写那些服务器没有返回,但是却在按钮组中存在的按钮。
      clientButnsArray: ['close', 'reportRefresh', 'reportClear', 'reportPrint', 'reportExport'] // 这里填写那些服务器没有返回,但是却在按钮组中存在的按钮。
    }
  },

  computed: {
    ...mapState({
      mainHeight: state => state.app.mainHeight
    }),
    urlPath() {
      return this.$route.meta.url + `&token=${getToken()}`
    }
  },

  watch: {},

  created() {
    if (this.$route.meta.url.includes('http')) {
      this.clientButnsArray = ['close']
    }
    Bus.$off('reportRefresh')
    Bus.$on('reportRefresh', () => {
      this.reportRefresh()
    })
    Bus.$off('reportClear')
    Bus.$on('reportClear', () => {
      this.reportClear()
    })
    Bus.$off('reportPrint')
    Bus.$on('reportPrint', () => {
      this.reportPrint()
    })
    Bus.$off('reportExport')
    Bus.$on('reportExport', () => {
      this.reportExport()
    })
  },
  mounted() {
    // 要用nextTick,否则高度赋值不成功。
    this.$nextTick(() => {
      this.$refs.iframe.height = this.mainHeight - 89
    })
  },
  methods: {
    reportRefresh() {
      this.$refs.iframe.contentWindow.search()
    },
    reportClear() {
      this.$refs.iframe.contentWindow.Reset()
    },
    reportPrint() {
      this.$refs.iframe.contentWindow.Print()
    },
    reportExport() {
      this.$refs.iframe.contentWindow.Export()
    }
  }
}

</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.pjpccx{
  h1{
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
  }
  .iframe{
    width: 100%;
  }
}
</style>

 

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值