Estoy tratando de conseguir esta función para trabajar en el sitio web de un proyecto en el que estoy trabajando. El propósito de esta función es sólo (físicamente) imprimir el contenido de un div hijo que es casualmente conoce como selector #contenido.

Aquí de lo poco que he conseguido 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 «imprimir» hipervínculo. La nueva ventana se carga el contenido de la #div de contenido 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 carga el estilo junto con él. Todos los contenidos de todos acaba de ser presentado en la esquina superior izquierda. He probado la vinculación de la CSS a través de JS o simplemente ponerlo en el head de la página, como se sugiere en otra página. Yo podría estar haciendo este equivocado, por supuesto. Realmente no he intentado calcular esto con JQuery sin embargo, por lo que si usted tiene cualquiera de las otras soluciones que me puede ayudar con mi problema, estoy feliz y abierto a recibir algunos consejos acerca de ellos.

Gracias de antemano!

  • antes de seguir adelante con ella, por favor, cambie el id siempre como veldbox. No es una buena práctica tener ID varias veces en una sola página. En lugar de ello, utilice la clase.
  • Tuve el comentario de hace una semana, también. Gracias por señalarlo! Voy a cambiar eso de inmediato.
  • Que es un requisito básico. Y usted puede tratar de lo que Reeno ha proporcionado. Funcionará como se espera. 🙂
  • ¿Resolverlo?
  • No completamente. Aún así no se imprima correctamente después del golpe se ha formateado con el estilo CSS. El código debería funcionar, me puse en la dirección correcta. Aún así, me gustaría saber exactamente por qué la página se imprime de esta manera. Actualmente estoy buscando para convertir el contenido de un archivo PDF a través de Servoy. Yo debería ser capaz de hacer eso por mí esta vez.
InformationsquelleAutor Fariz Fakkel | 2013-09-12

6 Comentarios

  1. 35

    Crear una completa página HTML en la ventana abierta y la referencia de tu CSS-archivo existe:

    var win = window.open('','printwindow');
    win.document.write('<html><head><title>Print it!</title><link  type="text/css" href="styles.css"></head><body>');
    win.document.write($("#content").html());
    win.document.write('</body></html>');
    win.print();
    win.close();
    • He probado la solución. El CSS se carga en la ventana nueva, lo cual es bueno. Cuando en realidad impresión, no imprimir la página con el mismo diseño. Probablemente hay alguna razón obvia soy demasiado cognitivamente desafió para realmente ser capaz de averiguar por mí mismo, jaja. Ilumíname!
    • No sé… tal vez los estilos CSS son establecidos para un determinado tipo de medios sólo? media="screen" en el HTML o @media screen en el archivo CSS itsef?
    • No he establecer cualquier tipo de medios de reglas. Sería una buena idea añadir los de estilo selectores a ella?
    • Si usted no los necesita no me agregarlos. Es difícil decir por qué no funciona. Cuando el navegador muestra el derecho de estilos (no sólo el archivo CSS se debe cargar, también las reglas CSS que se aplican para el HTML), también deben imprimirse correctamente.
    • Si necesita agregar más de una hoja de estilos de la página principal y desea agregar mediante programación, vea mi solución.
    • imprimir-js es una gran biblioteca printjs.crabbly.com

  2. 11

    Hago algo similar al ejemplo anterior, pero encontró que no funciona en todos los navegadores. El siguiente fue probado con todos los principales navegadores y funciona para mí. (Recuerde, algunos estilos pueden ser dependientes de los padres de los elementos, así que si tu div está anidado dentro de los elementos de los estilos puede que no sea exactamente la misma en la ventana de impresión como 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  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);
    }
    • Quien abajo votado, por favor explique por qué.
    • No sé que votaron abajo, pero yo voto hasta : después de 3 horas de intentos, su punta finalmente logró hicieron el trabajo para mí! Parece que está relacionado con el ..documento.abrir/cerrar parte!
    • Esto hizo que el truco printWindow.document.close(); Magia 🙂
    • +1 para el setTimeout desde mi vista previa de impresión estaba vacía sin ella. La adición de la setTimout permite representar en primer lugar, a continuación, imprimir.
    • Bueno la solución que funciona para mí un millón de gracias 🙂 setTimeout(function() { …} me funciona de lo contrario, su mostrando página en blanco en la impresión de pantalla.
  3. 8

    Quería tener todos los estilos de la página principal y de impresión. Así que yo quería usar todos los css enlaces en el CABEZA.

    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();
    })();
  4. 5

    También tuve el problema con el CSS de carga después de la representación de las páginas, así que la solución fue leer el css del contenido de un archivo y escribir 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();
    });
  5. 1

    He tenido el mismo problema. Lo que me estoy encontrando es que es la impresión antes de la css tiene tiempo de render en la página. Lo que me hizo encontrar este fue hacer un setTimeout en la impresión de la llamada y todo el estilo fue entonces aparecen en el documento impreso. Si yo no hice el tiempo de espera me encontré con que el estilo no estaba siendo recogido en la impresión de la llamada.

  6. 0

    Sólo en caso de que uno está tratando de hacer que esto suceda con Angular, por favor pon tu archivo CSS en la carpeta de activos.

Dejar respuesta

Please enter your comment!
Please enter your name here