vue使用iframe嵌入网页 - vue - 前端 - 技术设计

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" 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 - 宽高自适应显示
	*/
	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("读取异常");
	}


	}