javascript-VueJS：将div内容绑定到iframe src

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

<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属性采用网址地址,并将尝试加载整个页面.因此,与其尝试将任何形式的引用都传递给编辑器div,不如通过window.location.href将其传递给当前URL.

然后,通过在编辑器div上设置ref属性,可以在已安装的生命周期挂钩中对其进行引用,并获取其位置和尺寸.一旦有了它,就可以设置iframe和包装器div的样式,使其仅显示`编辑器的内容.

这是全部内容(还有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>

标签：vue-js,iframe,javascript
来源： https://codeday.me/bug/20191111/2019800.html