這篇文章主要講解了vue如何使用iframe嵌入網(wǎng)頁,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
永豐ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
1、列表頁面:
this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }})
點(diǎn)擊查看后觸發(fā)事件,帶入?yún)?shù)跳轉(zhuǎn)到userTemplate頁面;reportType有兩種類型,0表示reportUrl是絕對網(wǎng)址,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-寬高自適應(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ù)字是頁面布局寬度差值 mobsf.style.height = (Number(deviceHeight) - 80) + 'px' // 數(shù)字是頁面布局高度差 } 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("讀取異常"); } }
看完上述內(nèi)容,是不是對vue如何使用iframe嵌入網(wǎng)頁有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁名稱:vue如何使用iframe嵌入網(wǎng)頁
標(biāo)題網(wǎng)址:http://aaarwkj.com/article6/pcsdig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、營銷型網(wǎng)站建設(shè)、定制網(wǎng)站、外貿(mào)建站、定制開發(fā)、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)