javascript - una - Imprimir el contenido de un DIV.
mostrar variable javascript en html (24)
¿Cuál es la mejor manera de imprimir el contenido de un DIV?
Aquí está mi plugin de impresión jquery
(function ($) {
$.fn.printme = function () {
return this.each(function () {
var container = $(this);
var hidden_IFrame = $(''<iframe></iframe>'').attr({
width: ''1px'',
height: ''1px'',
display: ''none''
}).appendTo(container);
var myIframe = hidden_IFrame.get(0);
var script_tag = myIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
script = myIframe.contentWindow.document.createTextNode(''function Print(){ window.print(); }'');
script_tag.appendChild(script);
myIframe.contentWindow.document.body.innerHTML = container.html();
myIframe.contentWindow.document.body.appendChild(script_tag);
myIframe.contentWindow.Print();
hidden_IFrame.remove();
});
};
})(jQuery);
Aquí hay una solución IFrame que funciona para IE y Chrome:
function printHTML(htmlString) {
var newIframe = document.createElement(''iframe'');
newIframe.width = ''1px'';
newIframe.height = ''1px'';
newIframe.src = ''about:blank'';
// for IE wait for the IFrame to load so we can access contentWindow.document.body
newIframe.onload = function() {
var script_tag = newIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
var script = newIframe.contentWindow.document.createTextNode(''function Print(){ window.focus(); window.print(); }'');
script_tag.appendChild(script);
newIframe.contentWindow.document.body.innerHTML = htmlString;
newIframe.contentWindow.document.body.appendChild(script_tag);
// for chrome, a timeout for loading large amounts of content
setTimeout(function() {
newIframe.contentWindow.Print();
newIframe.contentWindow.document.body.removeChild(script_tag);
newIframe.parentElement.removeChild(newIframe);
}, 200);
};
document.body.appendChild(newIframe);
}
Aunque esto lo ha dicho @gmcalab, si está usando jQuery, puede usar mi complemento printElement.
Aquí hay una muestra y más información sobre el complemento here .
El uso es más bien estrecho hacia adelante, solo toma un elemento con un selector jQuery e imprímelo:
$("myDiv").printElement();
¡Espero eso ayude!
Aunque la respuesta de @BC fue la mejor para imprimir una sola página.
Pero para imprimir varias páginas de tamaño A4 al mismo tiempo con ctrl + P, la siguiente solución puede ayudar.
@media print{
html *{
height:0px!important;
width:0px !important;
margin: 0px !important;
padding: 0px !important;
min-height: 0px !important;
line-height: 0px !important;
overflow: visible !important;
visibility: hidden ;
}
/*assing myPagesClass to every div you want to print on single separate A4 page*/
body .myPagesClass {
z-index: 100 !important;
visibility: visible !important;
position: relative !important;
display: block !important;
background-color: lightgray !important;
height: 297mm !important;
width: 211mm !important;
position: relative !important;
padding: 0px;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
orphans: 0!important;
widows: 0!important;
overflow: visible !important;
page-break-after: always;
}
@page{
size: A4;
margin: 0mm ;
orphans: 0!important;
widows: 0!important;
}}
Cambios leves sobre la versión anterior - probado en CHROME
function PrintElem(elem)
{
var mywindow = window.open('''', ''PRINT'', ''height=400,width=600'');
mywindow.document.write(''<html><head><title>'' + document.title + ''</title>'');
mywindow.document.write(''</head><body >'');
mywindow.document.write(''<h1>'' + document.title + ''</h1>'');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write(''</body></html>'');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
Creó algo genérico para usar en cualquier elemento HTML.
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement(''IFRAME'');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
//usage
document.getElementById(''xyz'').printMe();
document.getElementsByClassName(''xyz'')[0].printMe();
Espero que esto ayude.
Cree una hoja de estilo de impresión separada que oculte todos los demás elementos, excepto el contenido que desea imprimir. Marque con ''media="print" cuando lo carga:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Esto le permite tener una hoja de estilo completamente diferente cargada para las impresiones.
Si desea forzar que aparezca el diálogo de impresión del navegador para la página, puede hacerlo así en la carga utilizando JQuery:
$(function() { window.print(); });
o desencadenar cualquier otro evento que desee, como que un usuario haga clic en un botón.
Creo que hay una mejor solución. Haga que su div para imprimir cubra todo el documento, pero solo cuando se imprima:
@media print {
.myDivToPrint {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
Creo que las soluciones propuestas hasta ahora tienen los siguientes inconvenientes:
- Las soluciones de consulta de medios CSS suponen que solo hay un div para imprimir.
- Las soluciones javascript solo funcionan en ciertos navegadores.
- Destruyendo el contenido de la ventana principal y recreando eso crea un desastre.
He mejorado las soluciones anteriores. Aquí hay algo que he probado que funciona muy bien con los siguientes beneficios.
- Funciona en todos los navegadores, incluidos IE, Chrome, Safari y Firefox.
- No destruye y vuelve a cargar la ventana principal.
- Puede imprimir cualquier número de DIV en una página.
- Utiliza plantillas html para evitar concatenaciones de cadenas propensas a errores.
Puntos clave a tener en cuenta:
- Debe tener un onload = "window.print ()" en la ventana recién creada.
- No llame a targetwindow.close () o targetwindow.print () desde el padre.
- Asegúrate de hacer targetwindow.document.close () y target.focus ()
- Estoy usando jquery, pero también puedes hacer la misma técnica usando plain javascript.
- Puede ver esto en acción aquí http://math.tools/table/multiplication . Puede imprimir cada tabla por separado, haciendo clic en el botón Imprimir en el encabezado de la caja.
<script id="print-header" type="text/x-jquery-tmpl">
<html>
<header>
<title>Printing Para {num}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
max-width: 300px;
}
</style>
</header>
<body onload="window.print()">
<h2>Printing Para {num} </h2>
<h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
</body>
</html>
</script>
<script>
$(''.printthis'').click(function() {
num = $(this).attr("data-id");
w = window.open();
w.document.write(
$("#print-header").html().replace("{num}",num) +
$("#para-" + num).html() +
$("#print-footer").html()
);
w.document.close();
w.focus();
//w.print(); Don''t do this otherwise chrome won''t work. Look at the onload on the body of the newly created window.
///w.close(); Don''t do this otherwise chrome won''t work
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
<p class="para" id="para-1">
Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="para" id="para-2">
Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Desde aquí http://forums.asp.net/t/1261525.aspx
<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page
//Other content you wouldn''t like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv(''div_print'');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn''t like to print
//Other content you wouldn''t like to print
</body>
</html>
El siguiente código copia todos los nodos relevantes a los que se dirige el selector de consultas, copia sobre sus estilos como se ve en la pantalla, ya que faltarán muchos elementos principales utilizados para seleccionar los selectores de css. Esto causa un poco de retraso si hay muchos nodos secundarios con muchos estilos.
Lo ideal sería tener lista una hoja de estilo de impresión, pero esto es para casos de uso donde no se puede insertar una hoja de estilo de impresión y desea imprimir como se ve en la pantalla.
Si copia los siguientes elementos en la consola del navegador en esta página, imprimirá todos los fragmentos de código en esta página.
+function() {
/**
* copied from https://.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi https://.com/users/2318881/adi-darachi
*/
var copyComputedStyle = function(from,to){
var computed_style_object = false;
//trying to figure out which style object we need to use depense on the browser support
//so we try until we have one
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);
//if the browser dose not support both methods we will return null
if(!computed_style_object) return null;
var stylePropertyValid = function(name,value){
//checking that the value is not a undefined
return typeof value !== ''undefined'' &&
//checking that the value is not a object
typeof value !== ''object'' &&
//checking that the value is not a function
typeof value !== ''function'' &&
//checking that we dosent have empty string
value.length > 0 &&
//checking that the property is not int index ( happens on some browser
value != parseInt(value)
};
//we iterating the computed style object and compy the style props and the values
for(property in computed_style_object)
{
//checking if the property and value we get are valid sinse browser have different implementations
if(stylePropertyValid(property,computed_style_object[property]))
{
//applying the style property to the target element
to.style[property] = computed_style_object[property];
}
}
};
// Copy over all relevant styles to preserve styling, work the way down the children tree.
var buildChild = function(masterList, childList) {
for(c=0; c<masterList.length; c++) {
var master = masterList[c];
var child = childList[c];
copyComputedStyle(master, child);
if(master.children && master.children.length > 0) {
buildChild(master.children, child.children);
}
}
}
/** select elements to print with query selector **/
var printSelection = function(querySelector) {
// Create an iframe to make sure everything is clean and ordered.
var iframe = document.createElement(''iframe'');
// Give it enough dimension so you can visually check when modifying.
iframe.width = document.width;
iframe.height = document.height;
// Add it to the current document to be sure it has the internal objects set up.
document.body.append(iframe);
var nodes = document.querySelectorAll(querySelector);
if(!nodes || nodes.length == 0) {
console.error(''Printing Faillure: Nothing to print. Please check your querySelector'');
return;
}
for(i=0; i < nodes.length; i++) {
// Get the node you wish to print.
var origNode = nodes[i];
// Clone it and all it''s children
var node = origNode.cloneNode(true);
// Copy the base style.
copyComputedStyle(origNode, node);
if(origNode.children && origNode.children.length > 0) {
buildChild(origNode.children, node.children);
}
// Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.
iframe.contentWindow.document.body.append(node);
}
// Print the window
iframe.contentWindow.print();
// Give the browser a second to gather the data then remove the iframe.
window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}
window.printSelection = printSelection;
}();
printSelection(''.default.prettyprint.prettyprinted'')
En Opera, prueba:
print_win.document.write(''</body></html>'');
print_win.document.close(); // This bit is important
print_win.print();
print_win.close();
He creado un plugin para abordar este escenario. No estaba contento con los complementos disponibles y me propuse hacer algo más extenso / configurable.
Igual que la mejor respuesta, en caso de que necesite imprimir la imagen como lo hice:
En caso de que desee imprimir la imagen:
function printElem(elem)
{
Popup(jQuery(elem).attr(''src''));
}
function Popup(data)
{
var mywindow = window.open('''', ''my div'', ''height=400,width=600'');
mywindow.document.write(''<html><head><title>my div</title>'');
mywindow.document.write(''</head><body >'');
mywindow.document.write(''<img src="''+data+''" />'');
mywindow.document.write(''</body></html>'');
mywindow.print();
mywindow.close();
return true;
}
La mejor manera de hacerlo sería enviar los contenidos del div al servidor y abrir una nueva ventana donde el servidor podría colocar esos contenidos en la nueva ventana.
Si esa no es una opción, puedes intentar usar un lenguaje del lado del cliente como javascript para ocultar todo en la página, excepto ese div y luego imprimir la página ...
La solución aceptada no estaba funcionando. Chrome imprimía una página en blanco porque no estaba cargando la imagen a tiempo. Este enfoque funciona:
Edit: Parece que la solución aceptada se modificó después de mi publicación. ¿Por qué el downvote? Esta solución también funciona.
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write(''<scr'' + ''ipt type="text/javascript">'' + ''window.onload = function() { window.print(); window.close(); };'' + ''</sc'' + ''ript>'');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
Modifiqué la respuesta de @BillPaetski para usar querySelector, agregar CSS opcional, eliminar la etiqueta H1 forzada y hacer el título opcionalmente especificado o extraído de la ventana. Tampoco deja de imprimir automáticamente y expone los elementos internos para que puedan ser cambiados en la función de envoltura o como desee.
Los únicos dos vars privados son tmpWindow y tmpDoc, aunque creo que el acceso a los títulos, css y elem pueden variar, se debe asumir que todos los argumentos de función son privados.
Código:function PrintElem(elem, title, css) {
var tmpWindow = window.open('''', ''PRINT'', ''height=400,width=600'');
var tmpDoc = tmpWindow.document;
title = title || document.title;
css = css || "";
this.setTitle = function(newTitle) {
title = newTitle || document.title;
};
this.setCSS = function(newCSS) {
css = newCSS || "";
};
this.basicHtml5 = function(innerHTML) {
return ''<!doctype html><html>''+(innerHTML || "")+''</html>'';
};
this.htmlHead = function(innerHTML) {
return ''<head>''+(innerHTML || "")+''</head>'';
};
this.htmlTitle = function(title) {
return ''<title>''+(title || "")+''</title>'';
};
this.styleTag = function(innerHTML) {
return ''<style>''+(innerHTML || "")+''</style>'';
};
this.htmlBody = function(innerHTML) {
return ''<body>''+(innerHTML || "")+''</body>'';
};
this.build = function() {
tmpDoc.write(
this.basicHtml5(
this.htmlHead(
this.htmlTitle(title) + this.styleTag(css)
) + this.htmlBody(
document.querySelector(elem).innerHTML
)
)
);
tmpDoc.close(); // necessary for IE >= 10
};
this.print = function() {
tmpWindow.focus(); // necessary for IE >= 10*/
tmpWindow.print();
tmpWindow.close();
};
this.build();
return this;
}
Uso:
DOMPrinter = PrintElem(''#app-container'');
DOMPrinter.print();
Nota: esto funciona solo con sitios habilitados para jQuery
Es muy simple con este truco genial. Funcionó para mí en el navegador Google Chrome . Firefox no te permite imprimir en PDF sin un complemento.
- Primero, abra el inspector usando (Ctrl + Shift + I) / (Cmd + Opción + I).
- Escribe este código en la consola.
var jq = document.createElement(''script'');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName(''body'')[0].appendChild(jq)
$("#myDivWithStyles").print() // Replace ID with yours
- Inicia el diálogo de impresión. Realice una impresión física o guárdela en PDF (en cromo). ¡Hecho!
La lógica es simple. Estamos creando una nueva etiqueta de script y la adjuntamos al cierre de la etiqueta de cuerpo. Inyectamos una extensión de impresión jQuery en el HTML. Cambie myDivWithStyles con su propia ID de etiqueta Div. Ahora se preocupa de preparar una ventana virtual imprimible.
Pruébalo en cualquier sitio. Solo la advertencia a veces se escribe CSS de manera engañosa puede hacer que falten estilos. Pero obtenemos el contenido la mayoría de las veces.
Sé que esta es una pregunta antigua, pero resolví este problema con jQuery.
function printContents(id)
{
var contents = $("#"+id).html();
if ($("#printDiv").length == 0)
{
var printDiv = null;
printDiv = document.createElement(''div'');
printDiv.setAttribute(''id'',''printDiv'');
printDiv.setAttribute(''class'',''printable'');
$(printDiv).appendTo(''body'');
}
$("#printDiv").html(contents);
window.print();
$("#printDiv").remove();
}
CSS
@media print {
.non-printable, .fancybox-outer { display: none; }
.printable, #printDiv {
display: block;
font-size: 26pt;
}
}
Si desea tener todos los estilos del documento original (incluidos los estilos en línea), puede utilizar este enfoque.
- Copia el documento completo
- Reemplace el cuerpo con el elemento que desea imprimir.
Implementación:
class PrintUtil {
static printDiv(elementId) {
let printElement = document.getElementById(elementId);
var printWindow = window.open('''', ''PRINT'');
printWindow.document.write(document.documentElement.innerHTML);
setTimeout(() => { // Needed for large documents
printWindow.document.body.style.margin = ''0 0'';
printWindow.document.body.innerHTML = printElement.outerHTML;
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
}, 1000)
}
}
Usando Jquery, simplemente usa esta función:
<script>
function printContent(el){
var restorepage = $(''body'').html();
var printcontent = $(''#'' + el).clone();
$(''body'').empty().html(printcontent);
window.print();
$(''body'').html(restorepage);
}
</script>
Su botón de impresión se verá así:
<button id="print" onclick="printContent(''id name of your div'');" >Print</button>
Editar: Si TIENE datos de formulario que necesita conservar, el clon no los copiará, por lo que solo tendrá que tomar todos los datos del formulario y reemplazarlos después de la restauración, así:
<script>
function printContent(el){
var restorepage = $(''body'').html();
var printcontent = $(''#'' + el).clone();
var enteredtext = $(''#text'').val();
$(''body'').empty().html(printcontent);
window.print();
$(''body'').html(restorepage);
$(''#text'').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
Bill Paetzke respuesta de Bill Paetzke para imprimir imágenes div que contienen imágenes pero no funcionó con google chrome
solo necesitaba agregar esta línea myWindow.onload=function(){ para que funcione y aquí está el código completo
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var myWindow = window.open('''', ''my div'', ''height=400,width=600'');
myWindow.document.write(''<html><head><title>my div</title>'');
/*optional stylesheet*/ //myWindow.document.write(''<link rel="stylesheet" href="main.css" type="text/css" />'');
myWindow.document.write(''</head><body >'');
myWindow.document.write(data);
myWindow.document.write(''</body></html>'');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem(''#myDiv'')" />
</body>
</html>
También si alguien solo necesita imprimir un div con ID, no necesita cargar jquery
Aquí está el código javascript puro para hacer esto
<html>
<head>
<script type="text/javascript">
function PrintDiv(id) {
var data=document.getElementById(id).innerHTML;
var myWindow = window.open('''', ''my div'', ''height=400,width=600'');
myWindow.document.write(''<html><head><title>my div</title>'');
/*optional stylesheet*/ //myWindow.document.write(''<link rel="stylesheet" href="main.css" type="text/css" />'');
myWindow.document.write(''</head><body >'');
myWindow.document.write(data);
myWindow.document.write(''</body></html>'');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintDiv(''myDiv'')" />
</body>
</html>
espero que esto pueda ayudar a alguien
function printdiv(printdivname)
{
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
Esto imprimirá el área div que desea y establecerá el contenido tal como estaba. printdivname es el div a imprimir.
- Abrir una nueva ventana
- Abra el objeto de documento de la nueva ventana y escriba en él un documento simple que no contenga nada más que el div que tiene y el encabezado html necesario, etc. También puede solicitar que el documento extraiga una hoja de estilo, dependiendo de su contenido.
- Coloque un script en la nueva página para llamar a window.print ()
- Disparar el guion