tab - window.opener javascript ejemplo

Abra una nueva ventana javascript(.open) junto con su estilo CSS (5)

Estoy intentando que esta función funcione en el sitio web de un proyecto en el que estoy trabajando. El propósito de esta función es imprimir solo (físicamente) el contenido de un div hijo que, por casualidad, se denomina selector #content.

Aquí está el poco que tengo hasta ahora:

<script> function printContent() { window.open().document.write($("#content").html()); window.print(); window.close(); } </script>

La función se activa cuando una persona hace clic en un hipervínculo de "impresión". La nueva ventana cargará el contenido del #content div que se analiza desde otro documento HTML:

<div id="content"> <br/> <div id="Algemeen"> <h3>Algemene informatie</h3> <fieldset id="profile"> <img id="male" src="./images/Pixers/male_icon.jpg"></img> <img id="female" src="./images/Pixers/female_icon1.jpg"></img> </fieldset> </div> <div id ="leftbox"> <div id ="veldbox"><label>BSN:</label>$!person.bsn</div> <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div> <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div> <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div> <div id ="veldbox"><label>Woonadres:</label>$!person.address</div> <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div> <div id ="veldbox"><label>Provincie:</label>$!person.province</div> <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div> <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div> <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div> <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div> <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div> </div> <div id="rightbox"> <div id ="veldbox"><label>Naam instantie:</label></div> <div id ="veldbox"><label>Adres instantie:</label></div> <div id ="veldbox"><label>Postcode instantie:</label></div> <div id ="veldbox"><label>Tel. instantie:</label></div> <div id ="veldbox"><label>Fax instantie:</label></div> <div id ="veldbox"><label>E-mail instantie:</label></div> <div id ="veldbox"><label>Website instantie:</label></div> <div id ="veldbox"><label>-:</label></div> <div id ="veldbox"><label>-:</label></div> <div id ="veldbox"><label>-:</label></div> </div> </div>

Simplemente no cargará el estilo junto con él. Todos los contenidos se recortarán en la esquina superior izquierda. He intentado vincular el CSS a través de JS o simplemente colocándolo en el encabezado de la página como se sugiere en otra página. Podría estar haciendo esto mal, por supuesto. Todavía no he intentado resolver esto con JQuery, así que si tiene alguna otra solución que pueda ayudarme con mi problema, estoy feliz y abierto a recibir algunos consejos sobre ellos.

¡Gracias por adelantado!

Cree una página HTML completa en la ventana abierta y haga referencia a su archivo CSS allí:

var win = window.open('''',''printwindow''); win.document.write(''<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>''); win.document.write($("#content").html()); win.document.write(''</body></html>''); win.print(); win.close();

Hago algo similar al ejemplo anterior, pero descubrí que no funciona en todos los navegadores. Lo siguiente fue probado con todos los principales navegadores y funciona para mí. (Recuerde que algunos estilos pueden depender de los elementos principales, por lo que si su división está anidada dentro de esos elementos, es posible que los estilos no se vean exactamente iguales en la ventana de impresión que en su página principal)

function printWithCss() { //Works with Chome, Firefox, IE, Safari //Get the HTML of div var title = document.title; var divElements = document.getElementById(''printme'').innerHTML; var printWindow = window.open("", "_blank", ""); //open the window printWindow.document.open(); //write the html to the new window, link to css file printWindow.document.write(''<html><head><title>'' + title + ''</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>''); printWindow.document.write(divElements); printWindow.document.write(''</body></html>''); printWindow.document.close(); printWindow.focus(); //The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome. setTimeout(function() { printWindow.print(); printWindow.close(); }, 100); }

Quería tener todos los estilos de la página principal e imprimir . Así que quise usar todos los enlaces css en el HEAD .

Mi solución utiliza jQuery .

(function print() { // getting the tag element I want to print // cloning the content so it doesn''t get messed // remove all the possible scripts that could be embed var printContents = $(''body'').clone().find(''script'').remove().end().html(); // get all <links> and remove all the <script>''s from the header that could run on the new window var allLinks = $(''head'').clone().find(''script'').remove().end().html(); // open a new window var popupWin = window.open('''', ''_blank''); // ready for writing popupWin.document.open(); // -webkit-print-color-adjust to keep colors for the printing version var keepColors = ''<style>body {-webkit-print-color-adjust: exact !important; }</style>''; // writing // onload="window.print()" to print straigthaway popupWin.document.write(''<html><head>'' + keepColors + allLinks + ''</head><body onload="window.print()">'' + printContents + ''</body></html>''); // close for writing popupWin.document.close(); })();

También tuve el problema con la carga de CSS después de la presentación de la página, por lo que la solución fue leer el contenido del archivo css y escribirlo en el nuevo documento:

var w = window.open(); jQuery.get(''/styles.css'', function (data) { w.document.write(''<html><head><style>''); w.document.write(data); w.document.write(''</style></head><body>''); w.document.write($(''.print-content'').html()); w.document.write(''</body></html>''); w.print(); w.close(); });

Tuve el mismo problema. Lo que estoy descubriendo es que se está imprimiendo antes de que el css tenga tiempo de procesarse en la página. Lo que hice para encontrar esto fue hacer un setTimeout en la llamada de impresión y todo el estilo se mostraba en el documento impreso. Si no hice el tiempo de espera, descubrí que el estilo no estaba siendo recogido en la llamada de impresión.