1.springboot后端整合不用说
<template>
<t-drawer class="r-dw" :visible="visible" :fullscreen="fullscreen" :switchFullscreen="fullscreen" @close="() => { $emit('cancel') }">
<div class="r-content">
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
</div>
</t-drawer>
</template>
<script>
import {
ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import {
baseUrl } from '@/services/baseUrl.js'
export default {
data () {
return {
src: '',
fullscreen:true,
height: document.documentElement.clientHeight - 94.5 + 'px'
}
},
props:{
visible:{
type:Boolean
},
loading:{
type:Boolean
},
},
mounted: function () {
console.log(111111)
const that = this
that.getToken()
window.onresize = function temp () {
that.height = document.documentElement.clientHeight - 94.5 + 'px'
}
},
methods: {
getToken () {
this.src = baseUrl+'/report/ureport/designer?token=' + Vue.ls.get(ACCESS_TOKEN)
}
}
}
</script>
<style>
.r-content{
height: calc(100vh - 50px);
}
.r-dw .ant-drawer-close{
top: -10px !important;
width: 48px !important;
height: 48px !important;
}
</style>
3. baseUrl 就是访问设计界面的ip+端口
4. 因为我这边单独访问报表项目的加了个前缀 /report。你们没加前缀是可以去掉的
5. 最后面是拼接了token