下午经理让我在客户服务平台创建一个新的路由,把我们之前写的报表工具嵌套进去,之前的是通过ip访问的,讨论了一会决定用神器 iframe,直接嵌套进去,之前也写过,代码这个东西,CV才是精髓,去某度看了一下,随后开始操作
首先创建好了路由的权限,让他在页面也可以进行点点点的操作,之后创建vue页面
去页面看看
成功出现,下面看一下我之前开发的页面的样子,记住这个ip,这个页面非常完美啊,有条件查询,有分页,有......
然后直接使用iframe嵌套进去
嵌套进去之后,属实有点怪
先不管UI了,最后再调,我觉得是我引入页面的问题,我待会去设置一下应该就是可以了,分享一下代码
<template>
<div>
<iframe src="外部网页url" id="mobsf" frameborder="0" style="position:absolute;"></iframe>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted(){
/**
* iframe-宽高自适应显示
*/
function changeMobsfIframe(){
const mobsf = document.getElementById('mobsf');
const deviceWidth = document.body.clientWidth;
const deviceHeight = document.body.clientHeight;
mobsf.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
}
changeMobsfIframe()
window.onresize = function(){
changeMobsfIframe()
}
},
}
</script>
现在要解决的是url的问题了,在公司肯定不会让你每次引入页面都把url写死的,所以我们来解决他
找到你们项目中负责控制url的文件,我的是这个,所以我就在这里直接规定
搞了一晚上,一直NaN原来这个.env文件是有点东西的给你们普及一下
.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX
.env：
其中最重要的是,.env文件数据配置文件,修改完之后一定要重启,切记
上一下代码
说一下引入的思路,先引入hrCloudCommon里面的js
然后初始化设置的时候定义一个方法,在methods里面给路径赋值
通过data的return到上面的template里面
随后iframe的src记得加上:
:的意思就是给这个对象赋Vue属性
<template>
<div>
<!-- <iframe :src="ReportUrl1" id="mobsf" frameborder="0" style="position:absolute;"></iframe>-->
<iframe :src="ReportUrl1" style="width: 100%;height: 100%;min-height: 600px"></iframe>
</div>
</template>
<script>
import Report from '@/api/common/hrcloudCommon';
export default {
name: "Report",
data () {
return {
ReportUrl1:''
}
},
mounted(){
this.showReport();
/**
* iframe-宽高自适应显示
*/
function changeMobsfIframe(){
const mobsf = document.getElementById('mobsf');
const deviceWidth = document.body.clientWidth;
const deviceHeight = document.body.clientHeight;
mobsf.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
}
changeMobsfIframe()
window.onresize = function(){
changeMobsfIframe()
}
},
methods:{
showReport(){
let ReportUrl = Report.Report_Cli_URL+"reportTools/cusMain";
// let ReportUrl = Report.Report_Cli_URL
console.log("ReportUrl",ReportUrl)
// let ReportUrl = 'http://192.168.251.62:9093'
let HRUrl = Report.HRCLOUD_URL
this.ReportUrl1 = ReportUrl
//console.log("ReportUrl",ReportUrl)
//alert("1")
}
}
}
</script>
<style scoped>
</style>
最后就嵌套成功了
事情并没有结束,经理说不要这个页面,要根据右上角的ciic188的id进行查询,判断,这可难住我了,先写根据id拼接页面吧,其他的先不管
showReport(){
let ReportId = '4417';
let ReportUrl = Report.Report_Cli_URL+"reportTools/newreportList/"+ReportId;
console.log("ReportUrl",ReportUrl)
this.ReportUrl1 = ReportUrl
}
可以看到直接规定一个 ReportID 然后根据经理给出的路径一拼接就可以了
但没说这个ReportId是啥,经理让我自己找,这就有点麻烦了,下次给大家分享一个好东西
先分享一下成功的图片
但是这个ReportId是死的所以需要确定id,也就是Id,这里我找到之后用sessionStorage把id存进去了,然后在这个id取出就可以了大致代码是这样
showReport(){
let ReportId = sessionStorage.getItem("cusId")
console.log("ReportId",ReportId)
let ReportUrl = Report.Report_Cli_URL+"reportTools/newreportList/"+ReportId;
console.log("ReportUrl",ReportUrl)
this.ReportUrl1 = ReportUrl
if (ReportId != ""){
this.$message.success("查询成功")
}else {
this.$message.warning("暂无数据")
}
}
以上就是Vue使用iframe前台外部页面的详细内容，更多请关注我分享的其它相关文章！
