Wie lässt sich der Inhalt eines DIV am besten ausdrucken?
Antworten
Zu viele Anzeigen?
Stefan Norberg
Punkte
894
Wenn Sie alle Stile des Originaldokuments (einschließlich der Inline-Stile) haben möchten, können Sie diesen Ansatz verwenden.
- Kopieren Sie das gesamte Dokument
- Ersetzen Sie den Körper durch das Element, das Sie drucken möchten.
Umsetzung:
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)
}
}
live-love
Punkte
40586
Die akzeptierte Lösung hat nicht funktioniert. Chrome druckte eine leere Seite, weil es das Bild nicht rechtzeitig lud. Dieser Ansatz funktioniert:
Edit: Es scheint, dass die akzeptierte Lösung nach meinem Beitrag geändert wurde. Warum die Herabstufung? Diese Lösung funktioniert doch 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;
}
Shedrack
Punkte
551
Es ist zwar etwas spät, aber ich fand das wirklich sehr schön!!!
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
Paweł Moskal
Punkte
129
Verwenden Sie einfach PrintJS
let printjs = document.createElement("script");
printjs.src = "https://printjs-4de6.kxcdn.com/print.min.js";
document.body.appendChild(printjs);
printjs.onload = function (){
printJS('id_of_div_you_want_to_print', 'html');
}
Jazzy
Punkte
5804
Ich weiß, dies ist eine alte Frage, aber ich löste dieses Problem w 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;
}
}
