Leichte Änderungen gegenüber früheren Versionen - auf CHROME getestet
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;
}
Ich denke, es gibt eine bessere Lösung. Machen Sie Ihr Div, um das gesamte Dokument zu bedecken, aber nur wenn es gedruckt wird:
@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;
}
}
Obwohl dies von @gmcalab gesagt wurde, Wenn Sie jQuery verwenden, können Sie mein PrintElement-Plugin verwenden.
Es gibt ein Beispiel hier und weitere Informationen zum Plugin hier .
Die Verwendung ist eher geradeaus, greifen Sie einfach mit einem jQuery-Selektor nach einem Element und drucken Sie es aus:
$("myDiv").printElement();
Ich hoffe es hilft!
Verwenden Sie einfach Jquery, um diese Funktion zu verwenden:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>
Ihr Druckknopf sieht so aus:
<button id="print" onclick="printContent('id name of your div');" >Print</button>
Bearbeiten: Wenn Sie keine Formulardaten haben, die Sie behalten müssen, kopiert Klon diese nicht. Sie müssen also alle Formulardaten abholen und nach der Wiederherstellung wie folgt ersetzen:
<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>
Von hier 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>
ich habe Bill Paetzke answer verwendet, um ein Div zu drucken, das Bilder enthält, aber es funktionierte nicht mit Google Chrome
ich musste nur diese Zeile myWindow.onload=function(){ hinzufügen, damit sie funktioniert und hier ist der vollständige Code
<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>
auch wenn jemand nur ein div mit id drucken muss, muss er keine jquery laden
hier ist reiner Javascript-Code, um dies zu tun
<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>
ich hoffe das kann jemandem helfen
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;
}
Dadurch wird der gewünschte Div-Bereich gedruckt und der Inhalt wird auf den ursprünglichen Wert zurückgesetzt. printdivname ist das zu druckende div.
Ich habe ein Plugin für dieses Szenario erstellt. Ich war unzufrieden mit den Plugins da draußen und wollte etwas umfangreicher/konfigurierbar machen.
Erstellen Sie ein separates Druck-Stylesheet, in dem alle anderen Elemente mit Ausnahme des zu druckenden Inhalts ausgeblendet sind. Kennzeichnen Sie es mit 'media="print", wenn Sie es laden:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Auf diese Weise können Sie ein völlig anderes Stylesheet für Ausdrucke laden.
Wenn Sie den Druckdialog des Browsers für die Seite erzwingen möchten, können Sie dies beim Laden mit JQuery folgendermaßen tun:
$(function() { window.print(); });
oder ausgelöst durch ein anderes Ereignis, das Sie möchten, z. B. einen Benutzer, der auf eine Schaltfläche klickt.
Ich denke, die bisher vorgeschlagenen Lösungen haben folgende Nachteile:
- Die CSS-Medienabfrage-Lösungen gehen davon aus, dass nur ein Div gedruckt werden muss.
- Die Javascript-Lösungen funktionieren nur mit bestimmten Browsern.
- Zerstörung des übergeordneten Fensterinhalts und Wiederherstellen, wodurch ein Durcheinander entsteht.
Ich habe die oben genannten Lösungen verbessert. Hier ist etwas, das ich getestet habe, das mit den folgenden Vorteilen wirklich gut funktioniert.
- Funktioniert mit allen Browsern, einschließlich IE, Chrome, Safari und Firefox.
- Zerstört und lädt das übergeordnete Fenster nicht erneut.
- Kann eine beliebige Anzahl von DIVs auf einer Seite drucken.
- Verwendet HTML-Vorlagen, um fehleranfällige String-Verkettungen zu vermeiden.
Wichtige Punkte zu beachten:
- Muss im neu erstellten Fenster ein onload = "window.print ()" haben.
- Rufen Sie nicht targetwindow.close () oder targetwindow.print () vom übergeordneten Objekt auf.
- Stellen Sie sicher, dass Sie targetwindow.document.close () und target.focus () ausführen.
- Ich verwende jquery, aber Sie können dieselbe Technik auch mit einfachem Javascript verwenden.
- Sie können dies in Aktion sehen http://math.tools/table/multiplication . Sie können jede Tabelle einzeln drucken, indem Sie auf die Schaltfläche "Drucken" in der Kopfzeile klicken.
<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>
Die akzeptierte Lösung funktionierte nicht. Chrome druckte eine leere Seite, da das Bild nicht rechtzeitig geladen wurde. Dieser Ansatz funktioniert:
Bearbeiten: Anscheinend wurde die akzeptierte Lösung nach meinem Beitrag geändert. Warum das Downvote? Diese Lösung funktioniert auch.
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;
}
Obwohl die Antwort von @BC am besten war, um eine einzelne Seite zu drucken.
Es kann jedoch hilfreich sein, mehrere Seiten im A4-Format gleichzeitig mit der Tastenkombination Strg + P zu drucken.
@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;
}}
Ich weiß, das ist eine alte Frage, aber ich habe dieses Problem mit jQuery gelöst.
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;
}
}
Hier ist mein Jquery Print Plugin
(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);
- Öffnet ein neues Fenster
- Öffnen Sie das Dokumentobjekt des neuen Fensters und schreiben Sie ein einfaches Dokument in das Dokument, das nur das div und den erforderlichen HTML-Header usw. enthält. Möglicherweise möchten Sie das Dokument auch in ein Stylesheet ziehen, je nach Inhalt
- Fügen Sie ein Skript auf der neuen Seite ein, um window.print () aufzurufen.
- Löst das Skript aus
Wenn Sie alle Stile aus dem Originaldokument (einschließlich Inline-Stile) erhalten möchten, können Sie diesen Ansatz verwenden.
- Kopieren Sie das vollständige Dokument
- Ersetzen Sie den Körper durch das Element, das Sie drucken möchten.
Implementierung:
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)
}
}
Ich habe die Antwort von @BillPaetski geändert, um querySelector zu verwenden, optionales CSS hinzuzufügen, das erzwungene H1-Tag zu entfernen und den Titel optional festzulegen oder aus dem Fenster zu ziehen. Es druckt auch nicht mehr automatisch und macht die internen Daten sichtbar, sodass sie in der Wrapper-Funktion oder wie gewünscht abgestellt werden können.
Die einzigen beiden privaten Variablen sind tmpWindow und tmpDoc. Ich glaube jedoch, dass Titel, Css und Elem Zugriff variieren können. Es sollte angenommen werden, dass alle Funktionsargumente privat sind.
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;
}
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
Versuchen Sie in Opera:
print_win.document.write('</body></html>');
print_win.document.close(); // This bit is important
print_win.print();
print_win.close();
Hinweis: Dies funktioniert nur mit jQuery-fähigen Sites.
Mit diesem coolen Trick ist es sehr einfach. Es hat für mich in Google Chrome Browser funktioniert. Firefox erlaubt Ihnen nicht, ohne Plugin auf PDF zu drucken.
- Öffnen Sie zunächst den Inspektor mit (Strg + Umschalt + I)/(Befehlstaste + Wahltaste + I).
- Geben Sie diesen Code in die Konsole ein
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
- Der Druckdialog wird gestartet. Nehmen Sie einen physischen Ausdruck oder speichern Sie ihn als PDF (in Chrom). Erledigt!
Die Logik ist einfach. Wir erstellen ein neues Skript-Tag und hängen es vor dem schließenden Body-Tag an. Wir haben eine jQuery-Druckerweiterung in den HTML-Code eingefügt. Ändern Sie myDivWithStyles mit Ihrer eigenen Div-Tag-ID. Jetzt muss ein druckbares virtuelles Fenster erstellt werden.
Versuchen Sie es auf einer beliebigen Site. Der einzige Vorbehalt ist, dass manchmal kompliziert geschriebenes CSS dazu führen kann, dass Stile fehlen. Den Inhalt bekommen wir aber meistens.
Hier ist eine IFrame-Lösung, die für IE und Chrome funktioniert:
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);
}
Mit dem folgenden Code werden alle relevanten Knoten kopiert, auf die der Abfrageselektor abzielt. Diese werden über die auf dem Bildschirm angezeigten Stile kopiert, da viele übergeordnete Elemente für das Targeting der CSS-Selektoren fehlen. Dies führt zu Verzögerungen, wenn viele untergeordnete Knoten mit vielen Stilen vorhanden sind.
Idealerweise haben Sie ein Druckformatblatt bereit. Dies ist jedoch für Anwendungsfälle gedacht, bei denen kein Druckformatblatt eingefügt werden muss und Sie den Ausdruck wie auf dem Bildschirm sehen möchten.
Wenn Sie die folgenden Elemente in die Browserkonsole auf dieser Seite kopieren, werden alle Codeausschnitte auf dieser Seite gedruckt.
+function() {
/**
* copied from https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi https://stackoverflow.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')
Dies ist wirklich ein alter Beitrag, aber hier ist eines meiner Updates, was ich mit der richtigen Antwort gemacht habe. Meine Lösung verwendet auch jQuery.
Es geht darum, die richtige Druckansicht zu verwenden, alle Stylesheets für die korrekte Formatierung einzubeziehen und in den meisten Browsern unterstützt zu werden.
function PrintElem(elem, title, offset)
{
// Title constructor
title = title || $('title').text();
// Offset for the print
offset = offset || 0;
// Loading start
var dStart = Math.round(new Date().getTime()/1000),
$html = $('html');
i = 0;
// Start building HTML
var HTML = '<html';
if(typeof ($html.attr('lang')) !== 'undefined') {
HTML+=' lang=' + $html.attr('lang');
}
if(typeof ($html.attr('id')) !== 'undefined') {
HTML+=' id=' + $html.attr('id');
}
if(typeof ($html.attr('xmlns')) !== 'undefined') {
HTML+=' xmlns=' + $html.attr('xmlns');
}
// Close HTML and start build HEAD
HTML+='><head>';
// Get all meta tags
$('head > meta').each(function(){
var $this = $(this),
$meta = '<meta';
if(typeof ($this.attr('charset')) !== 'undefined') {
$meta+=' charset=' + $this.attr('charset');
}
if(typeof ($this.attr('name')) !== 'undefined') {
$meta+=' name=' + $this.attr('name');
}
if(typeof ($this.attr('http-equiv')) !== 'undefined') {
$meta+=' http-equiv=' + $this.attr('http-equiv');
}
if(typeof ($this.attr('content')) !== 'undefined') {
$meta+=' content=' + $this.attr('content');
}
$meta+=' />';
HTML+= $meta;
i++;
}).promise().done(function(){
// Insert title
HTML+= '<title>' + title + '</title>';
// Let's pickup all CSS files for the formatting
$('head > link[rel="stylesheet"]').each(function(){
HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
i++;
}).promise().done(function(){
// Print setup
HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';
// Finish HTML
HTML+= '</head><body>';
HTML+= '<h1 class="text-center mb-3">' + title + '</h1>';
HTML+= elem.html();
HTML+= '</body></html>';
// Open new window
var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
// Append new window HTML
printWindow.document.write(HTML);
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
/* Make sure that page is loaded correctly */
$(printWindow).on('load', function(){
setTimeout(function(){
// Open print
printWindow.print();
// Close on print
setTimeout(function(){
printWindow.close();
return true;
}, 3);
}, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
});
});
});
}
Später brauchst du einfach so etwas:
$(document).on('click', '.some-print', function() {
PrintElem($(this), 'My Print Title');
return false;
});
Versuch es.
Erstellt ein generisches Element, das für jedes HTML-Element verwendet werden kann
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();
Hoffe das hilft.