vue使用iframe嵌入網(wǎng)頁(yè)的示例代碼
1、列表頁(yè)面:
this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }})
點(diǎn)擊查看后觸發(fā)事件,帶入?yún)?shù)跳轉(zhuǎn)到userTemplate頁(yè)面;reportType有兩種類(lèi)型,0表示reportUrl是絕對(duì)網(wǎng)址,1表示reportUrl是本地html文件。
2、userTemplate頁(yè)面:
<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-寬高自適應(yīng)顯示 */ function changeMobsfIframe() { const mobsf = document.getElementById('child') const deviceWidth = document.body.clientWidth const deviceHeight = document.body.clientHeight mobsf.style.width = (Number(deviceWidth) - 30) + 'px' // 數(shù)字是頁(yè)面布局寬度差值 mobsf.style.height = (Number(deviceHeight) - 80) + 'px' // 數(shù)字是頁(yè)面布局高度差 } 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("讀取異常"); } }
到此這篇關(guān)于vue使用iframe嵌入網(wǎng)頁(yè)的示例代碼的文章就介紹到這了,更多相關(guān)vue使用iframe嵌入網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+webpack+Element 兼容問(wèn)題總結(jié)(小結(jié))
這篇文章主要介紹了Vue+webpack+Element 兼容問(wèn)題總結(jié)(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue實(shí)現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)boradcast和dispatch的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),它通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下2023-11-11Vue?cli3.0創(chuàng)建Vue項(xiàng)目的簡(jiǎn)單過(guò)程記錄
Vue CLI是一個(gè)基于Vue.js進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue?cli3.0創(chuàng)建Vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解
在Vue前端開(kāi)發(fā)中,使用 el-date-picker 組件進(jìn)行日期選擇是常見(jiàn)的需求,有時(shí)候我們需要限制用戶(hù)只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后的日期,本文將詳細(xì)介紹如何使用 el-date-picker 組件實(shí)現(xiàn)這些限制,讓你能夠輕松應(yīng)對(duì)各種日期選擇場(chǎng)景,需要的朋友可以參考下2023-09-09