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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
js 幻灯片的实现
Dec 06 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 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编写和读取XML的几种方式
2013/01/12 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php调用C代码的实现方法
2014/03/11 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python实现爬取图书封面
2018/07/05 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python的slice notation的特殊用法详解
2019/12/27 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
学雷锋演讲稿
2014/03/04 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
2014年稽查工作总结
2014/12/20 职场文书
单位病假条范文
2015/08/17 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
索尼ICF-36收音机评测
2022/04/30 无线电