1

Trato de abrir en una ventana el contenido de cierto elemento div con un identificador exacto, mi código de la función es el siguiente:

function newWindow() {
    var w = window.open();
    var contenido = document.getElementById("verVentana").innerHTML;

    w.document.body.innerHTML=contenido;
}

Esta función es ejecutada desde:

<button class="btn-sm btn btn-block btn-outline-primary" onclick="nWin()">Ver PDF</button>

En la función de JS, como pueden notar, estoy tomando el contenido del id verVentana de mi html y lo muestro en la nueva ventana.

Ahora lo que busco es que ese contenido enviado se muestre pero con los estilos que tiene en el html.

<div class="container">
    <h1>Titulo de la Página</h1>
    <button class="btn-sm btn btn-block btn-outline-primary" onclick="newWindow()">Abrir Ventana</button>
    <div class="col-sm-12 mt-2 container" id="verVentana">
        <div class="row">
            <table class="table table-sm table-hover table-info">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">First</th>
                        <th scope="col">Last</th>
                        <th scope="col">Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                </tbody>
            </table>
            <br>
            <p>Lorem ipsum dolor sit amet, <code>Lorem ipsum dolor sit amet.</code> consectetur adipisicing elit. Natus eveniet, sunt asperiores! Doloribus voluptatum accusamus nobis nihil odit alias quas nulla dicta, culpa, deserunt provident, ab odio facilis aspernatur? Nemo!</p>
        </div>
    </div>

</div>

Ese es el código de mi HTML, como se puede notar utilizo los estilos de Bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

1 respuesta 1

2

Podrías cargar la hoja de estilo dinámicamente en la nueva ventana

Ejemplo:

function newWindow() {
  var w = window.open();

  // Creamos y cargamos dinámicamente la hoja de estilo
  var link  = document.createElement('link');
  link.rel  = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css';
  w.document.head.appendChild(link);

  // Cargamos el contenido
  var contenido = document.getElementById("verVentana").innerHTML;
  w.document.body.innerHTML=contenido;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.