vue如何使用iframe嵌入网页

发布时间:2020-07-17 14:01:34 作者:小猪
来源:亿速云 阅读:1112

这篇文章主要讲解了vue如何使用iframe嵌入网页,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

1、列表页面:

this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }})

点击查看后触发事件,带入参数跳转到userTemplate页面;reportType有两种类型,0表示reportUrl是绝对网址,1表示reportUrl是本地html文件。

2、userTemplate页面:

<template>
 <div> 
  <iframe v-if="reportType==0" name = "child" id = "child" v-bind:src="reportUrl"
  width="auto" height="300"
   frameborder="0" scrolling="no" 
  ></iframe>
 
 <div v-if="reportType==1" v-html="htmlContent"
 width="auto" height="300" scrolling="no" ></div>
 
 </div>
</template>
 
<script>
import {
 getFile
} from '@/api/report'
export default {
 mounted() {
  /**
   * iframe-宽高自适应显示
   */
  function changeMobsfIframe() {
   const mobsf = document.getElementById('child')
   const deviceWidth = document.body.clientWidth
   const deviceHeight = document.body.clientHeight
   mobsf.style.width = (Number(deviceWidth) - 30) + 'px' // 数字是页面布局宽度差值
   mobsf.style.height = (Number(deviceHeight) - 80) + 'px' // 数字是页面布局高度差
  }
 
  changeMobsfIframe()
 
  window.onresize = function() {
   changeMobsfIframe()
  }
 },
 
 data() {
  return {
   htmlContent: '',
   reportUrl: '',
   reportType: ''
  }
 },
 created() {
  // this.fileName = '../static/file/' + this.$route.params.report_url
  this.reportUrl = this.$route.params.reportUrl
  this.reportType = this.$route.params.reportType
  if (this.reportType == 1) {
   getFile(this.reportUrl).then(res => {
    if (res.code === 200) {
     this.htmlContent = res.data
    }
   })
  }
 }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
 
</style>

后端getFile:

//读取文件
 @RequestMapping("/getFile")
  @ResponseBody
 public HttpResult getFile(String reportUrl){
  StringBuilder result = new StringBuilder();
     try{
     
     FileSystemResource resource = new FileSystemResource("D:"+File.separator+"test"+File.separator+reportUrl);
     File file = resource.getFile();
       BufferedReader br = new BufferedReader(new FileReader(file));
       String s = null;
       while((s = br.readLine())!=null){
         result.append(System.lineSeparator()+s);
       }
       br.close();  
       return HttpResult.getSuccessInstance(result);
     }catch(Exception e){
       e.printStackTrace();
       return HttpResult.getFailedInstance("读取异常");
     } 
 }

看完上述内容,是不是对vue如何使用iframe嵌入网页有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 网页iframe injection案例
  2. 嵌入的iframe框架自适应宽度代码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue iframe fram

上一篇:读数据库postgresql的方法

下一篇:设置mysql不区分大小写的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》