帆软报表在vue中预览

跨域问题

'/webroot/decision': {
  target: 'http://ip:端口',
  changeOrigin: true,
  pathRewrite: {
    '^/webroot/decision': '/webroot/decision'
  }
}

.vue

<template>
  <div class="sheetWrap">
    <div style="position: relative; width: 100%; height: 100%">
      <iframe
        ref="iframe"
        src=""
        style="
          margin: 0px;
          padding: 0px;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0px;
          top: 0px;
        "
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { store } from '@/utils/sunmei-data'

export default {
  name: '',
  data() {
    return {
      // iframeSrc: 'http://ip:端口/webroot/decision/view/report?viewlet=cpt文件名.cpt&op=write'
    }
  },
  mounted() {
    // 携带token，此配置需要在数据决策系统中配置用户（一用户一账号）
    // this.getToken()
    // 无需登录（数据决策系统中关闭模板认证）
    this.getIframe()
  },
  methods: {
    getToken() {
      axios
        .get(
          '/webroot/decision/login/cross/domain?fine_username=admin&fine_password=123456&validity=-1'
        )
        .then((res) => {
          const strD = res.data.replace('callback(', '')
          const str = strD.substring(0, strD.length - 1)
          const strF = JSON.parse(str)
          this.getIframe([['Authorization', 'Bearer ' + strF.accessToken]])
        })
      return ''
    },
    getIframe(headers = []) {
      const xhr = new XMLHttpRequest()
      xhr.open(
        'GET',
        `/webroot/decision/view/report?viewlet=${
          cpt文件名
        }.cpt&op=write`
      )
      xhr.responseType = 'text'
      headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1])
      })
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          if (xhr.status === 200) {
            let iframe = this.$refs.iframe
            iframe =
              iframe.contentWindow || iframe.contentDocument.document || iframe.contentDocument
            iframe.document.open()
            iframe.document.write(xhr.response)
            iframe.document.close()
          }
        }
      }
      xhr.send()
    }
  }
}
</script>

<style lang="scss" scoped>
.sheetWrap {
  // 指定样式宽度
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>