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中 For, While与递归的用法
May 07 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue 虚拟DOM的原理
Oct 03 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python 中如何写注释
2020/08/28 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
新浪网技术部笔试题
2016/08/26 面试题
班组建设经验交流材料
2014/05/12 职场文书
关于读书的活动方案
2014/08/14 职场文书
合作协议书范文
2014/08/20 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
离职报告格式
2014/11/04 职场文书
高三复习计划
2015/01/19 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书