<template>
  <div>
    <el-button type="primary" size="mini" icon="el-icon-download" @click.prevent="download">下载</el-button>
    <div v-loading="loading" style="width:100%;height:calc(80vh - 50px);margin-top:5px;">
      <iframe id="oifra" :src="downloadUrl" frameborder="0" scrolling="true" width="100%" height="100%" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    downloadUrl() {
      var url = this.src
      return `https://view.officeapps.live.com/op/view.aspx?src=${url}`
    }
  },
  watch: {
    src() {
      this.loading = true
    }
  },
  mounted() {
    var self = this
    this.loading = true
    const iframe = document.querySelector('#oifra')
    // 处理兼容行问题
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', function() {
        self.loading = false
      })
    } else {
      iframe.onload = function() {
        self.loading = false
      }
    }
  },
  methods: {
    download() {
      if (this.src) {
        window.open(this.src)
      }
    }
  }
}
</script>
