（八）vue使用iframe嵌入网页

小咪咪 2022-04-16 01:38 908阅读 0赞

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

如果希望覆盖整个页面：