0
95
ViewsPerder el estilo CSS al imprimir
Estoy usando una hoja de estilo para imprimir correctamente una página web. La página web tiene campos ubicados uno al lado del otro, pero al imprimir estos campos ya no se encuentran uno al lado del otro, sino que caen en cascada por la hoja. He creado una hoja de estilo, pero no estoy seguro exactamente de cómo se supone que eso evitará que esto suceda, a menos que codifique en la hoja de estilo lo que quiero que suceda. Desafortunadamente, no puedo hacerlo porque necesito imprimir varias páginas diferentes que tienen diseños diferentes. ¿Hay alguna forma de arreglar esto?
function removeLinks(printDiv) { var all_links = document.getElementById(printDiv).getElementsByTagName("a"); for (var i = 0; i < all_links.length; i++) { all_links[i].removeAttribute("href"); } } function printdiv(printDiv) { var divCaseNote = document.getElementById(printDiv); var oldstr = document.body.innerHTML; var oldTitle = document.title; if (divCaseNote != null) { divCaseNote.style = "padding: 20px;"; innerHTML = divCaseNote.innerHTML; } removeLinks(printDiv); var headstr = "<html><head rel=\"stylesheet\" media=\"all\" link href=\"/CSS/style.css\"/><title> </title></head><body>"; var footstr = "</body>"; var newstr = document.all.item(printDiv).innerHTML; document.body.innerHTML = headstr + newstr + footstr; document.title = oldTitle.replace(" - View Case Note", ""); window.print() document.body.innerHTML = oldstr; document.title = oldTitle;EDITAR: un fragmento de la salida html de esta función. Contiene todos los divs correctos para las columnas, pero en lugar de imprimir las columnas una al lado de la otra, se imprimen en cascada hacia abajo en la página.
<div class=\"view-value\" style=\"border-left: none;\"> Jerry</div></div></div> <div class=\"col-md-3\"><div class=\"media-body\"> <div class=\"view-label\">Participant's Last Name</div> <div class=\"view-value\" style=\"border-left: none;\">Field</div> Cómo debería verse [![Cómo debería verse][1]](https://i.stack.imgur.com/vST1M.png)
Cómo se ve realmente después de la impresión 
1 answers
Answer question0
El problema es que los estilos en línea están siendo borrados por esta declaración:
divCaseNote.style = "padding: 20px;";que elimina todo el atributo de estilo y lo reemplaza solo con el relleno.
Para agregar/alterar el relleno, pero nada más, desea cambiar solo esa propiedad, así que intente:
divCaseNote.style.padding = "20px";