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