您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了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" ></iframe> <div v-if="reportType==1" v-html="htmlContent" width="auto" height="300" scrolling="no" ></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嵌入网页有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。