Tengo este pdf incrustado en mi Vue archivo, pero quiero obtener el contenido de un div donde defino la tabla html:

<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>

Es esto posible?

InformationsquelleAutor Alyssa Reyes | 2017-04-28

1 Comentario

  1. 4

    Es posible! Del iframe src atributo toma en una dirección URL y se intenta cargar la página entera. Así, en lugar de intentar pasar cualquier tipo de referencia al editor de div, le pasamos la URL de la página actual a través de window.location.href.

    Luego, mediante el establecimiento de un ref atributo en el editor de div, puede hacer referencia a ella en su mounted del ciclo de vida de gancho y obtener la posición y dimensión. Una vez que tienes eso, puedes cambiar el estilo del iframe y un contenedor div para mostrar sólo el contenido de la » editor.

    Aquí está toda la cosa (y un 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>
    • Cuando las pruebas de la codepen en Chrome Version 66.0.3359.139, hay un CORS de error y no se carga. Access to Font at 'https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'https://codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://codepen.io' is therefore not allowed access.

Dejar respuesta

Please enter your comment!
Please enter your name here