vue使用iframe嵌入网页的示例代码


Posted in Javascript onJune 09, 2020

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嵌入网页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
微信小程序实现人脸识别
May 25 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
JavaScript实现区块链
Mar 14 #Javascript
iview table render集成switch开关的实例
Mar 14 #Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 #Javascript
Vue.js 动态为img的src赋值方法
Mar 14 #Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 #Javascript
vue 过滤器filter实例详解
Mar 14 #Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 #Javascript
You might like
PHP 地址栏信息的获取代码
2009/01/07 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP crc32()函数讲解
2019/02/14 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python处理Excel文件实例代码
2017/06/20 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
物业管理计划书
2014/01/10 职场文书
高中生的自我评价
2014/03/04 职场文书
企业诚信承诺书
2014/05/23 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
观看建国大业观后感
2015/06/01 职场文书
捐款仪式主持词
2015/07/04 职场文书