溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
