La raíz del documento contiene dos archivos, uno es index.html , el segundo se llama styles.css
el código relevante es el código de Javascript, que ya publiqué aquí, debería formatear el html para imprimir de la misma manera que se muestra en el navegador, en cambio, la salida para el cuadro de diálogo de impresión no está formateada en absoluto...
¿Cómo debo escribir un Código Javascript, que pueda imprimir el Contenido del <div class="main-container"> manteniendo el Estilo del mismo?
Intenté escribir algo de javascript para hacer esto, pero el resultado es que imprime todo muy bien, ignorando por completo el estilo css que me tomó tanto tiempo desarrollar.
¿Me podría ayudar?
el acceso directo a su trabajo este es el código Javascript que estoy usando
<script type="text/javascript"> function PrintDiv() { var windowContent = '<!DOCTYPE html>'; //Starting HTML Tags windowContent += '<html>'; //Setting Print Page Title windowContent += '<head>'; windowContent += '<title>Print Content</title>'; windowContent += '<link rel="stylesheet" type="text/css" href="styles.css" />'; windowContent += '</head>'; //Starting Body Tag windowContent += '<body>' //Getting Div HTML windowContent += document.getElementById("main-container").innerHTML; //Closing Body Tag and HTML Tag windowContent += '</body>'; windowContent += '</html>'; windowContent += 'divContents' //Calling Print Window var printWin = window.open('','','fullscreen=yes'); //Opening Print Window printWin.document.open(); //Adding Content in Print Window printWin.document.write(windowContent); //Closing Print Window printWin.document.close(); //Focusing User to Print Window printWin.focus(); //Calling Default Browser Printer printWin.print(); //Closing Print Window printWin.close(); } </script>Utilice la consulta de medios impresos @media para formatear también la vista impresa. Mediaquery en Mozilla
Finalmente su trabajo - El JS tiene que ser
<head> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript"> function PrintDiv() { var windowContent = '<!DOCTYPE html>'; //Starting HTML Tags windowContent += '<html>'; //Setting Print Page Title windowContent += '<head>'; windowContent += '<title>Print Content</title>'; windowContent += '<link rel="stylesheet" type="text/css" href="styles.css" />'; windowContent += '</head>'; //Starting Body Tag windowContent += '<body>' //Getting Div HTML windowContent += document.getElementById("main-container").innerHTML; //Closing Body Tag and HTML Tag windowContent += '</body>'; windowContent += '</html>'; //Calling Print Window var printWin = window.open('','','fullscreen=yes'); //Opening Print Window printWin.document.open(); //Adding Content in Print Window printWin.document.write(windowContent); //Closing Print Window printWin.document.close(); //Focusing User to Print Window printWin.focus(); //Calling Default Browser Printer printWin.print(); //Closing Print Window printWin.close(); } </script> </head>cambié la estructura del código en el elemento principal