vue+element UI 学习总结笔记（五）_vue嵌入iframe

 我们项目中，报表是独立的服务，通过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>