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" 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("读取异常");
    }
}

来源：https://blog.csdn.net/w_t_y_y/article/details/84100658