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 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
JS实现点击掉落特效
Jan 29 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安装攻略:常见问题解答(二)
2006/10/09 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php通过各种函数判断0和空
2020/07/04 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
python对html代码进行escape编码的方法
2015/05/04 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python实现数据分析与建模
2019/07/11 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python的pip有什么用
2020/06/17 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
总经理文秘岗位职责
2014/02/03 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
法人身份证明书
2014/10/08 职场文书
团组织推荐意见
2015/06/05 职场文书
单位考核鉴定意见
2015/06/05 职场文书