（八）vue使用iframe嵌入网页

1、列表页面：

 this.$({ 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 = ('child')
      const deviceWidth = 
      const deviceHeight = 
       = (Number(deviceWidth) - 30) + 'px' // 数字是页面布局宽度差值
       = (Number(deviceHeight) - 80) + 'px' // 数字是页面布局高度差
    }

    changeMobsfIframe()

     = function() {
      changeMobsfIframe()
    }
  },

  data() {
    return {
      htmlContent: '',
      reportUrl: '',
      reportType: ''
    }
  },
  created() {
    //  = '../static/file/' + this.$.report_url
     = this.$
     = this.$
    if ( == 1) {
      getFile().then(res => {
        if ( === 200) {
           = 
        }
      })
    }
  }
}
</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:"++"test"++reportUrl);
	        	File file = ();
	            BufferedReader br = new BufferedReader(new FileReader(file));
	            String s = null;
	            while((s = ())!=null){
	                (()+s);
	            }
	            ();   
	            return (result);
	        }catch(Exception e){
	            ();
	            return ("读取异常");
	        }
			

	}

如果希望覆盖整个页面：

 <iframe 
      class="child"
      v-bind:src="url"
      :style="{width: width, height:height}"
    ></iframe>



 data() {
    return {
      url:'',
      height:  + 'px',
      width: '100%'
    };
  },