欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用iframe嵌入網(wǎng)頁的示例代碼

 更新時間:2020年06月09日 15:01:10   作者:w_t_y_y  
本篇文章主要介紹了vue使用iframe嵌入網(wǎng)頁的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

1、列表頁面:

this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }})

點擊查看后觸發(fā)事件,帶入?yún)?shù)跳轉(zhuǎn)到userTemplate頁面;reportType有兩種類型,0表示reportUrl是絕對網(wǎng)址,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-寬高自適應(yīng)顯示
   */
  function changeMobsfIframe() {
   const mobsf = document.getElementById('child')
   const deviceWidth = document.body.clientWidth
   const deviceHeight = document.body.clientHeight
   mobsf.style.width = (Number(deviceWidth) - 30) + 'px' // 數(shù)字是頁面布局寬度差值
   mobsf.style.height = (Number(deviceHeight) - 80) + 'px' // 數(shù)字是頁面布局高度差
  }
 
  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("讀取異常");
     } 
 }

 到此這篇關(guān)于vue使用iframe嵌入網(wǎng)頁的示例代碼的文章就介紹到這了,更多相關(guān)vue使用iframe嵌入網(wǎng)頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue中slot(插槽)的介紹與使用

    vue中slot(插槽)的介紹與使用

    這篇文章主要給大家介紹了關(guān)于vue中slot(插槽)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • Vue+webpack+Element 兼容問題總結(jié)(小結(jié))

    Vue+webpack+Element 兼容問題總結(jié)(小結(jié))

    這篇文章主要介紹了Vue+webpack+Element 兼容問題總結(jié)(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Vue實現(xiàn)boradcast和dispatch的示例

    Vue實現(xiàn)boradcast和dispatch的示例

    這篇文章主要介紹了Vue實現(xiàn)boradcast和dispatch的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-11-11
  • 在?Vue?中使用?iframe?嵌套頁面的步驟

    在?Vue?中使用?iframe?嵌套頁面的步驟

    這篇文章主要介紹了在?Vue?中使用?iframe?嵌套頁面,使用?iframe?技術(shù)可以實現(xiàn)多個頁面之間的數(shù)據(jù)傳遞和交互,提高了網(wǎng)站的整體性能和用戶體驗,需要的朋友可以參考下
    2023-05-05
  • Vue數(shù)字輸入框組件示例代碼詳解

    Vue數(shù)字輸入框組件示例代碼詳解

    很多朋友經(jīng)常遇到這樣的功能,只允許輸入數(shù)字,允許設(shè)置初始值、最大值、最小值,今天小編給大家分享示例代碼給大家介紹vue數(shù)字輸入框功能,感興趣的朋友一起看看吧
    2020-01-01
  • vue中如何使用echarts動態(tài)渲染數(shù)據(jù)

    vue中如何使用echarts動態(tài)渲染數(shù)據(jù)

    這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開源可視化圖表庫,它通過簡單的配置即可實現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下
    2023-11-11
  • Vue?cli3.0創(chuàng)建Vue項目的簡單過程記錄

    Vue?cli3.0創(chuàng)建Vue項目的簡單過程記錄

    Vue CLI是一個基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue?cli3.0創(chuàng)建Vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • 面試題:react和vue的區(qū)別分析

    面試題:react和vue的區(qū)別分析

    這篇文章主要介紹了react和vue的區(qū)別分析,在面試中經(jīng)常會遇到,小編通過實例文字相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • Vue實現(xiàn)簡單的拖拽效果

    Vue實現(xiàn)簡單的拖拽效果

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單的拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解

    Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解

    在Vue前端開發(fā)中,使用 el-date-picker 組件進(jìn)行日期選擇是常見的需求,有時候我們需要限制用戶只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后的日期,本文將詳細(xì)介紹如何使用 el-date-picker 組件實現(xiàn)這些限制,讓你能夠輕松應(yīng)對各種日期選擇場景,需要的朋友可以參考下
    2023-09-09

最新評論