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