vue使用iframe嵌套html页面,vue使用iframe嵌入网页的示例代码

1、列表页面：

this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }})

点击查看后触发事件，带入参数跳转到userTemplate页面；reportType有两种类型，0表示reportUrl是绝对网址，1表示reportUrl是本地html文件。

2、userTemplate页面：

width="auto" height="300"

frameborder="0" scrolling="no" style="position:absolute;top:80px;left: 30px;"

>

width="auto" height="300" scrolling="no" style="position:absolute;top:80px;left: 30px;">

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

}

})

}

}

}

后端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嵌入网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！