VueJS：将div内容绑定到iframe src [英] VueJS: Bind div content to iframe src

问题描述

我在我的Vue文件中嵌入了这个pdf，但我想从我定义html表的div中获取内容：

I have this pdf embedded on my Vue file, but I want to get the content from a div where I define the html table:

<template>
  <div id="editor"> HTML TABLE HERE </div>
  <iframe :src="iframe.src" type="application/pdf" width="100%" 
    height="650" frameborder="0" style="position:relative;z 
    index:999" ref="frame" @load="load" v-show="iframe.loaded">
  </iframe>
</template>

<script>
  export default {
    data() {
      return {
        iframe: {
          src: '', //DIV HERE #EDITOR
          loaded: false
        }
      }
    },
    methods: {
      load: function(){
        this.iframe.loaded = true;
      }
    }
  }
</script>

这可能吗？

推荐答案

有可能！ iframe的 src 属性接收一个URL地址，并尝试加载整个页面。因此，不要尝试将任何类型的引用传递给编辑器div，而是通过 window.location.href 将其传递给当前URL。

It is possible! The iframe's src attribute takes in a URL address and will try to load the whole page. So, instead of trying to pass it any kind of reference to the editor div, pass it the current URL via window.location.href.

然后，通过在编辑器div上设置 ref 属性，您可以在<$ c $中引用它c>挂载生命周期钩子并获取它的位置和尺寸。一旦你有了这个，你可以设置iframe样式和一个包装div只显示`editor的内容。

Then, by setting a ref attribute on the editor div, you can reference it in your mounted lifecycle hook and get it's position and dimension. Once you have that, you can style the iframe and a wrapper div to only show contents of the `editor.

这是整个事情（和 codepen ）：

<template>
  <div id="app">
    <div id="editor" ref="editor">HTML TABLE HERE</div>
    <div 
      id="iframe-wrapper"
      :style="iframe.wrapperStyle" 
    >
      <iframe 
        v-if="loaded"
        :src="iframe.src"
        :style="iframe.style"
        :height="iframe.style.height"
        :width="iframe.style.width"
        type="application/pdf"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loaded: false,
      iframe: {
        src: window.location.href,
        style: null,
        wrapperStyle: null,
      }
    }
  },
  mounted() {
    let editor = this.$refs.editor;
    this.iframe.style = {
      position: 'absolute',
      width: window.innerWidth,
      height: window.innerHeight,
      top: -editor.offsetTop + "px",
      left: -editor.offsetLeft + "px",
    }    
    this.iframe.wrapperStyle = {
      overflow: 'hidden',
      height: editor.clientHeight + "px",
      width: editor.clientWidth + "px",
    } 
    this.loaded = true;
  }
}
</script>

这篇关于VueJS：将div内容绑定到iframe src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！