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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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