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" style="position:absolute;top:80px;left: 30px;"
  ></iframe>

 <div v-if="reportType==1" v-html="htmlContent"
 width="auto" height="300" scrolling="no" style="position:absolute;top:80px;left: 30px;"></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嵌入网页的示例代码的文章就介绍到这了,更多相关vue使用iframe嵌入网页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue集成Iframe页面的方法示例

    1. 项目需求 我们切换为vue框架是后面的事情,之前还有一些功能页面是用jsp页面写的,而我们的管理系统需要既支持Vue的url,又要支持这些发布之后的jsp页面 还有一个就是切换tab回来的时候之前输入的东西还要存在 系统页面截图 2. 实现思路 针对这个问题,我们最开始的实现思路是写了一个iframe的通用组件,然后把不同的http的页面的url传递进来进行切换,但是这样不满足第二条,我们发现只要切换了vue的路由,然后再切回http的页面,iframe中的src属性的页面就会从新刷新,没

  • 在vue中实现嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • vue与iframe之间的信息交互的实现

    说一下我的使用场景:在vue中使用百度地图,需要使用离线地图 先上代码 然后细细品 第一张图 第二张图 第三张图 1.首先iframe 引入你要嵌套的地址 2 .通过vue中给出的ref 来获取 ifarme的DOM元素 如图中的 this.iframeWin = this.$refs.iframe.contentWindow [拿到iframe的window对象] 3.vue如何向iframe内传送信息 可以通过H5新属性 postmessage 注释:[postMessage是有点类似于UD

  • Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

    当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互 首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe name="iframeMap" id="iframeMapViewComponent" width="100%" height="470px" v-bind:src=

  • Vue中对iframe实现keep alive无刷新的方法

    前言 最近一个需求,需要在 Vue 项目中加入 含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容 不会被刷新 .一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案...... Vue的keep-alive原理 要实现对保持iframe页的状态.我们先搞清楚为什么Vue的keep-alive不能凑效.keep-alive原理是把组件里的节点信息保留在了 VNode (在内存里),在需要渲染时候从Vnode渲染到真实DOM上.iframe页里

  • 开发一个封装iframe的vue组件

    VUE的基本组成单元,我看应该是组件.用VUE开发前端项目,就是开发一个个组件,然后搭积木一样,将项目搭建出来.组件包含在页面,或者是更大的组件里面.在这里,组件与页面的界限,好像并不明显.事实上,对于单页应用,只有一个页面. 组件的好处,一是可以加强复用:二是能够将特定功能封装,利于调用:三是由于职责分明,组件高内聚,组件间低耦合,利于系统功能的优化.扩展和维护.好处多多. 开发组件,主要有2部分内容: 1.组件内部逻辑 2.外部接口 由于我这两天弄的组件,里面包含有一个<iframe>,那

  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    写在最前 针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题,比如这样,右侧div中使用了一个iframe组件,导致实际操作中出现两个问题,一个是拖不动,另外一个是无法根据鼠标移动,快速响应,甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题.如果去除右侧iframe框架,则没有问题. 有iframe情况 无iframe情况 问题原因&am

  • 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

  • vue中使用iframe嵌入网页,页面可自适应问题

    目录 使用iframe嵌入网页,页面可自适应 vue iframe高度自适应 实用 实时刷新iframe高度变化 iframe高度有变的时候通知父级 iframe高度有变的时候直接修改iframe高度 使用iframe嵌入网页,页面可自适应 在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果. 考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用: 上图为系统整体结构图,需要在

  • vue轻松实现虚拟滚动的示例代码

    目录 前言 滚动原理 实现 源代码 参考 前言 移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示. 长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了. 为了解决长列表造成的渲染压力,业界出现了相应的应对技术,即长列表的虚拟滚动. 虚拟滚动的本质,不管页面如何滑动,HTM

  • vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • 用ES6的class模仿Vue写一个双向绑定的示例代码

    本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com

  • Vue 实现展开折叠效果的示例代码

    本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc

  • vue制作抓娃娃机的示例代码

    去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图 游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说游戏主要内容:娃娃滚动.爪子向下抓取.抓到卡片 废话不多说直接上代码!(此样式是根据需求而定) <!--布局样式--> <div class="game"> <!--爪子--> <div class="paw"> <

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • vue实现菜单权限控制的示例代码

    大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种--前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这两种方法的优缺点以及如何实现(不熟悉vue-router API的同学可以先去官网看一波API哈). 我先简单说下项目的需求:如下图所示,有一级菜单和二级菜单,然后不同的人登录进去会展示不同的菜单. 前端控制路由的思路:将所有的路由映射表都拿到前端来维护,就是我的router.js里面将所有的菜单p

随机推荐