Drucken & lt; div id = "Druckbereich" & gt; & lt; / div & gt; nur?

Wie kann ich drucken Sie das angezeigte div (ohne manuell deaktivieren alle anderen Inhalte auf der Seite)?

Möchte ich vermeiden, ein neues Vorschau-dialog, so erstellen ein neues Fenster mit diesem Inhalt ist nicht sinnvoll.

Die Seite enthält ein paar Tabellen, eine davon enthält der div-ich will drucken - die Tabelle ist gestaltet mit visual styles für das web, das sollte nicht zeigen, im Druck.

InformationsquelleAutor der Frage noesgard | 2009-01-22

  1. 594

    Hier ist eine Allgemeine Lösung, mit CSS nurdie ich überprüft, um zu arbeiten.

    @media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

    Alternative Ansätze sind nicht so gut. Mit display ist schwierig, weil, wenn jedes element hat display:none dann keiner seiner Nachkommen zeigt. Um es zu verwenden, müssen Sie ändern Sie die Struktur Ihrer Seite.

    Mit visibility funktioniert besser, da Sie können schalten Sie die Sichtbarkeit für die Nachkommen. Die unsichtbaren Elemente immer noch auf das layout, obwohl, so dass ich section-to-print nach oben Links, so dass es richtig druckt.

    InformationsquelleAutor der Antwort Bennett McElwee

  2. 200

    Habe ich eine bessere Lösung mit minimalem code.

    Platzieren Sie Ihre druckbare Teil in ein div mit einer id wie diese:

    <div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

    Dann fügen Sie ein Ereignis wie eine onclick (wie oben gezeigt), und übergeben Sie die id der div, wie ich oben.

    Nun erstellen wir eine wirklich einfache javascript:

    function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

    Bemerken, wie einfach das ist? Keine popups, keine neuen Fenster, keine verrückten styling, kein JS-Bibliotheken wie jquery. Das problem mit wirklich komplizierten Lösungen (die Antwort ist nicht kompliziert und nicht das, was ich mich beziehe), ist die Tatsache, dass es NIE übersetzen über alle Browser, immer! Wenn Sie wollen, um die Stile unterschiedlich ist, Sie, wie gezeigt, in der überprüft die Antwort, indem die media-Attribut, um ein stylesheet-link (media="print").

    Kein Schnickschnack, leicht, es funktioniert einfach.

    InformationsquelleAutor der Antwort Kevin Florida

  3. 116

    Alle Antworten sind bisher ziemlich fehlerhaft - entweder Sie beinhalten das hinzufügen class="noprint" um alles oder Durcheinander display innerhalb #printable.

    Ich denke, die beste Lösung wäre ein wrapper um den nicht-druckbaren Sachen:

    <head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

    Natürlich ist dies nicht perfekt, da es sich um bewegliche Sachen herum in Ihr HTML ein bisschen...

    InformationsquelleAutor der Antwort Greg

  4. 100

    Mit jQuery es ist so einfach:

    w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

    InformationsquelleAutor der Antwort romaninsh

  5. 21

    Konnte verwenden Sie ein Druck-stylesheetund verwenden Sie CSS, um ordnen Sie die Inhalte, die Sie wollte gedruckt? Lesen Sie diesen Artikel weitere Hinweise.

    InformationsquelleAutor der Antwort Paul Dixon

  6. 19

    Dieser gut funktioniert:

    <style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

    Beachten Sie, dass dies funktioniert nur mit "Sichtbarkeit". "display" wird es nicht tun. Getestet, im FF3.

    InformationsquelleAutor der Antwort Christian Maioli M.

  7. 11

    Ich nicht wirklich wie irgendeine dieser Antworten als ganzes. Wenn Sie eine Klasse (sagen printableArea) und haben, das als unmittelbares Kind der Körper, dann Sie können tun, etwas ähnliches in Ihrem print-CSS:

    body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

    Mit der Sichtbarkeit kann dazu führen, eine Menge von Abstand Probleme und leere Seiten. Dies ist, weil die Sichtbarkeit verwaltet die Elemente Raum, macht es nur versteckt, wo, wie display entfernt und können andere Elemente an Ihren Platz.

    Der Grund, warum diese Lösung funktioniert, ist, dass Sie nicht greifen alle Elemente, nur die unmittelbar untergeordneten Elemente des Körpers und verbergen Sie. Die anderen Lösungen mit der css-Anzeige, verstecken alle Elemente, die Effekte alles in printableArea Inhalt.

    Ich würde nicht vorschlagen, javascript als müssten Sie eine drucken-Schaltfläche, mit der der Benutzer und der standard-browser-drucken-buttons hätte nicht den gleichen Effekt. Wenn Sie wirklich brauchen, das zu tun, was ich tun würde, ist das speichern des html-von Körper, entfernen Sie alle unerwünschten Elemente, drucken, dann fügen Sie den html zurück. Wie bereits erwähnt, aber ich würde das vermeiden, wenn Sie können und verwenden eine CSS-option wie oben.

    HINWEIS: Sie können hinzufügen, was CSS in der print-CSS-Verwendung von inline-styles:

    <style type="text/css">
@media print {
   //styles here
}
</style>

    Oder, wie ich Sie normalerweise verwenden, wird ein link-tag:

    <link rel="stylesheet" type="text/css" media="print" href="print.css" />

    InformationsquelleAutor der Antwort fanfavorite

  8. 7

    1. Geben, was auch immer element, das Sie drucken möchten, die id printMe.

    2. Gehören Sie dieses Skript in Ihrem Kopf-Tags:

      <script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

    3. Aufruf der Funktion

      <a href="javascript:void(processPrint());">Print</a>

    InformationsquelleAutor der Antwort

  9. 6

    hm ... die Art der ein stylsheet für den Druck ... zB:

    <link rel="stylesheet" type="text/css" href="print.css" media="print" />

    drucken.css:

    div { display: none; }
#yourdiv { display: block; }

    InformationsquelleAutor der Antwort Andreas Niedermair

  10. 6
    <script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

    InformationsquelleAutor der Antwort Singh

  11. 5

    Schritt 1: Schreiben Sie den folgenden javascript-Code innerhalb deines head-Tags

    <script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

    Schritt 2: Rufen Sie die PrintMe('DivID') - Funktion durch ein onclick-Ereignis.

    <input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

    InformationsquelleAutor der Antwort Hardik Thaker

  12. 2

    Mit CSS 3 könnten Sie Folgendes verwenden:

    body *:not(#printarea) {
    display: none;
}

    InformationsquelleAutor der Antwort Gumbo

  13. 2

    Nahm ich die Inhalte mit JavaScript und erstellt ein Fenster, das ich drucken konnte, statt...

    InformationsquelleAutor der Antwort noesgard

  14. 2

    Sandro ' s Methode funktioniert Super.

    Ich optimiert, es zu ermöglichen, dass mehrere printMe links, besonders die zu verwendet werden in Registerkarten und expanding-text.

    function processPrint(printMe){ <-- Aufruf für eine variable hier

    var printReadyElem = document.getElementById(printMe); <-- entfernt die Anführungszeichen um printMe zu Fragen, für eine variable

    <a href="javascript:void(processPrint('divID'));">Print</a> <-- übergabe der div-ID bedruckt werden, um die Funktion zu aktivieren der printMe-Variablen in der div-ID. einfache Anführungszeichen sind erforderlich,

    InformationsquelleAutor der Antwort

  15. 2

    printDiv ("divId"): Eine verallgemeinerte Lösung zum drucken, div auf jeder Seite.

    Ich hatte ein ähnliches Problem, aber ich wollte (a) in der Lage sein, um die ganze Seite ausdrucken, oder (b) drucken einer von mehreren spezifischen Bereichen. Meine Lösung, Dank der viele der oben genannten, können Sie angeben, alle div-Objekt gedruckt werden.

    Der Schlüssel für diese Lösung ist, fügen Sie eine entsprechende Regel, die der print-Medien-Stylesheet, so dass die angeforderte div (und deren Inhalt) werden gedruckt.

    Erstellen Sie zunächst die erforderlichen print-css zu unterdrücken, alles (aber ohne bestimmte Regel zu ermöglichen, das element, das Sie drucken möchten). 

    <style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

    Beachten Sie, dass ich habe Hinzugefügt neue Klasse Regeln:

    • noprintarea können Sie unterdrücken das ausdrucken von Elementen innerhalb Ihrer div - sowohl den Inhalt als auch den block.
    • noprintcontent können Sie unterdrücken das ausdrucken von Elementen innerhalb Ihrer div - die Inhalte unterdrückt, aber und den zugewiesenen Bereich leer gelassen wird.
    • drucken ermöglicht es Ihnen, Elemente, die in der gedruckten version aber
      nicht auf dem Bildschirm zu Seite. Diese verfügen in der Regel über "display:none" für den Bildschirm Stil.

    Dann legen Sie drei JavaScript-Funktionen. Der erste schaltet lediglich die print media style-sheet-und ausschalten. 

    function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

    Die zweite macht die eigentliche Arbeit und der Dritte putzt danach. Die zweite (printDiv) aktiviert die print media style-sheet ist, dann hängt eine neue Regel zu ermöglichen, den gewünschten div-print, Probleme der print -, und fügt dann eine Verzögerung, bevor die endgültige Zimmerreinigung (sonst werden die styles können zurückgesetzt werden, bevor der Druck ist tatsächlich zu tun.) 

    function printDiv(divId)
{
  // Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  // Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  // need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

    Den letzten Funktionen wird der hinzugefügte Regel und legt die print-style wieder deaktiviert, sodass die ganze Seite gedruckt werden kann. 

    function printDivRestore()
{
  //remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  // and re-enable whole page printing
  disableSheet(0,true);
}

    Die einzige andere Sache zu tun ist, fügen Sie eine Zeile zu Ihrem onload-Verarbeitung, so dass Sie das Druckformat ist zunächst deaktiviert, damit die ganze Seite drucken. 

    <body onLoad='disableSheet(0,true)'>

    Dann, von überall in Ihrem Dokument, können Sie drucken ein div. Nur Frage printDiv("thedivid") mit einer Taste oder was auch immer.

    Ein großes plus für diesen Ansatz bietet es eine Allgemeine Lösung für das drucken ausgewählten Inhalt innerhalb einer Seite. Es ermöglicht auch die Nutzung der vorhandenen Stile für Elemente, die gedruckt werden - einschließlich der mit div.

    HINWEIS: In meiner Umsetzung, das muss man den ersten style-sheet. Ändern Sie die Blatt-Verweise (0) zu den entsprechenden Blatt-Nummer, wenn Sie brauchen, um es später in der blattreihenfolge.

    InformationsquelleAutor der Antwort DrDave

  16. 2

    @Kevin Florida
    Wenn Sie mehrere divs mit der gleichen Klasse, können Sie es verwenden, wie diese:

     <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

    war ich mit Colorbox inneren Gehalt geben

    $(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

    InformationsquelleAutor der Antwort Stefan

  17. 2

    In meinem Fall hatte ich zum drucken eines Bildes in eine Seite. Wenn ich die Lösung gestimmt, ich musste 1 leere Seite und die andere zeigt das Bild. Hoffe, es wird jemand helfen.

    Hier ist die css, die ich verwendet habe:

    @media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

    Mein html ist:

    <div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

    InformationsquelleAutor der Antwort Raphael Monteiro

  18. 1

    Verwenden Sie ein spezielles Stylesheet für den Druck

    <link rel="stylesheet" href="print.css" type="text/css" media="print" />

    und fügen Sie dann eine Klasse, d.h. "noprint" für jeden tag, das die Inhalte, die Sie nicht drucken möchten.

    In der CSS verwenden 

    .noprint {
  display: none;
}

    InformationsquelleAutor der Antwort Xn0vv3r

  19. 1

    Wenn Sie nur drucken wollen, dieses div-Element verwenden, müssen Sie die Anweisung:

    @media print{
    *{display:none;}
    #mydiv{display:block;}
}

    InformationsquelleAutor der Antwort

  20. 1

    Den printDiv () - Funktion kam ein paar mal, aber in diesem Fall, verlieren Sie alle Ihre binding-Elemente und Eingabewerte. Also, meine Lösung ist, erstellen Sie ein div für alles, was als "body_allin" und einer außerhalb der ersten sogenannten "body_print".

    Dann rufen Sie diese Funktion:

    function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

    InformationsquelleAutor der Antwort pmrotule

  21. 1

    Könnten Sie ein separates CSS-Format deaktiviert, alle anderen Inhalte außer die mit der id "printarea".

    Sehen CSS-Design: Print für weitere Erläuterungen und Beispiele.

    InformationsquelleAutor der Antwort Kosi2801

  22. 1

    Ich hatte mehrere Bilder mit jeweils einem Knopf und notwendig, um klicken Sie auf eine Taste drucken Sie jedes div mit einem Bild. Diese Lösung funktioniert, wenn ich die cache deaktiviert in meinem browser und die image-Größe nicht ändern in Chrome:

            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;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

    InformationsquelleAutor der Antwort 40-Love

  23. 1

    One mehr Ansatz weiter, ohne die aktuelle Seite und es bleiben auch die css beim drucken. Hier selector muss bestimmten div-Selektor, welche Inhalte wir brauchen, um zu drucken.

    printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

    Hier einige time-out zeigen, dass externe css angewendet werden.

    InformationsquelleAutor der Antwort M K Suman

  24. 0

    Diese können Sie verwenden:
    http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

    Oder verwenden Sie visibility:visible und visibility:hidden css-Eigenschaft zusammen mit @media print{}

    'display:none" zu verstecken alle verschachtelten 'display:block'. Das ist nicht die Lösung.

    InformationsquelleAutor der Antwort 0xC0DEGURU

  25. 0

    Ich habe versucht, viele der Lösungen zur Verfügung gestellt.Keiner von Ihnen arbeitete perfekt. Sie entweder verlieren, CSS-oder JavaScript-bindings. Ich fand eine perfekte und einfache Lösung, die weder Verluste CSS noch JavaScript-bindings.

    HTML:

    <div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

    CSS: 

    function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

    InformationsquelleAutor der Antwort BibanCS

  26. 0

    Besten css zu passen, Raum, leer, Höhe:

    @media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

    InformationsquelleAutor der Antwort TRI ÂN

Schreibe einen Kommentar