Drucken Sie einen bestimmten Teil der Webseite

Ich versuche, einen bestimmten Teil meiner Bewerbung auszudrucken.

Die Anwendung verfügt über eine Liste von Benutzern, die ihren Vor- und Nachnamen anzeigen. Wenn ich auf einen Benutzer klicke, wird ein Popup mit detaillierteren Informationen angezeigt.

Wie würde ich vorgehen, um nur das Popup für einen Benutzer zu drucken, auf den ich geklickt habe? Das Popup sieht folgendermaßen aus:

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

Die Drucktaste funktioniert jedoch noch nicht.

Sie können einfaches JavaScript verwenden, um ein bestimmtes Div von einer Seite zu drucken.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

Ich habe diese jQuery-Erweiterung erstellt, um den HTML-Code des ausgewählten Elements zu drucken: $('#div2').print();

$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});

Sehen sie in Aktion hier .

Sie müssten ein neues Fenster öffnen (oder zu einer neuen Seite navigieren), das nur die Informationen enthält, die der Benutzer drucken soll

Javscript:

function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(ele.previousSibling.innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

HTML:

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

Ein paar Anmerkungen hier: Der Anker darf KEIN Leerzeichen zwischen sich und dem Div enthalten, das den zu druckenden Inhalt enthält

Anstelle des komplizierten JavaScript können Sie dies tatsächlich mit einfachen Mitteln erreichen CSS: Verwenden Sie einfach zwei CSS-Dateien, eine für Ihre normale Bildschirmanzeige und eine für die Anzeige von NUR dem Inhalt, den Sie drucken möchten. Verstecken Sie in dieser letzteren Datei alles, was Sie nicht drucken möchten, und zeigen Sie nur das Popup an.

Denken Sie daran, das mediaAttribut beider CSS-Dateien zu definieren :

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />

Verwenden Sie einfach CSS, um den Inhalt auszublenden, den Sie nicht drucken möchten. Wenn der Benutzer Drucken auswählt, sucht die Seite im CSS " media =" print " nach Anweisungen zum Layout der Seite.

Das CSS media = "print" enthält Anweisungen zum Ausblenden des Inhalts, den wir nicht drucken möchten.

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>

Hier ist meine erweiterte Version, die, wenn wir CSS-Dateien laden möchten oder wenn Bildreferenzen in dem zu druckenden Teil vorhanden sind.

In diesen Fällen müssen wir warten, bis die CSS-Dateien oder die Bilder vollständig geladen sind, bevor wir die Funktion print () aufrufen. Daher sollten wir die Funktionsaufrufe print () und close () besser in den HTML-Code verschieben. Es folgt das Codebeispiel:

var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();

Ich habe eine bessere Option,

Trennen Sie zuerst den druckbaren und den nicht druckbaren Abschnitt nach Klassennamen oder ID

window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  // Visible the nonPrintable div
}

<input type="button" onclick="print()" value="Print"/>

Das ist alles

Stile

 @media print {

       .no-print{
               display : none !important;
                }
              }

Jquery

    function printInvoice()
 {
     printDiv = "#printDiv"; // id of the div you want to print
     $("*").addClass("no-print");
     $(printDiv+" *").removeClass("no-print");
     $(printDiv).removeClass("no-print");

     parent =  $(printDiv).parent();
     while($(parent).length)
     {
         $(parent).removeClass("no-print");
         parent =  $(parent).parent();
     }
     window.print();

 }

Druckknopf Html

<input type="button" onclick="printInvoice();" value="Print">

Versuche dies:

1. Speichern Sie das innerHTML des Containers im iFrame (plus druckspezifisches CSS)
2. Drucken Sie den iFrame-Inhalt.

Probieren Sie es in JSFiddle aus (iframes scheinen in der Vorschau von StackOverflow nicht zu funktionieren).

Sie können den Code hier sehen, aber er funktioniert aufgrund der Sicherheitsbeschränkungen im Renderer von StackOverflow nicht.

const printButton = document.getElementById('print-button');

printButton.addEventListener('click', event => {
  // build the new HTML page
  const content = document.getElementById('name-card').innerHTML;
  const printHtml = `<html>
      <head>
          <meta charset="utf-8">
          <title>Name Card</title>
      </head>
      <body>${content}</body>
  </html>`;
      
  // get the iframe
  let iFrame = document.getElementById('print-iframe');
  
  // set the iFrame contents and print
  iFrame.contentDocument.body.innerHTML = printHtml;
  iFrame.focus();
    iFrame.contentWindow.print();
  
});

<h1>Print your name badge</h1>
<div id="name-card" class="card">
  <p>Hello my name is</p>
  <h2>Max Powers</h2>
</div>
<p>You will be required to wear your name badge at all times</p>
<a id="print-button" class="btn btn-primary">Print</a>

<iframe id="print-iframe" width="0" height="0"></iframe>

Wie hier beantwortet: https://stackoverflow.com/a/1072151/421243 , können Sie den spezifischen Abschnitt mit Javascript einem ausgeblendeten Frame hinzufügen, fokussieren und drucken.

printPageArea()Übergeben Sie in Funktion die spezifische Div-ID, die Sie drucken möchten. Ich habe diesen JavaScript-Code von codexworld.com gefunden.

function printPageArea(areaID){
    var printContent = document.getElementById(areaID);
    var WinPrint = window.open('', '', 'width=900,height=650');
    WinPrint.document.write(printContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

Den vollständigen Code und das Tutorial finden Sie hier - Drucken des Seitenbereichs mit JavaScript .

Ich habe ein winziges JavaScript-Modul namens PrintElements geschrieben, um Teile einer Webseite dynamisch zu drucken.

Es durchläuft ausgewählte Knotenelemente und durchläuft für jeden Knoten den DOM-Baum bis zum BODY-Element. Auf jeder Ebene, einschließlich der ersten Ebene (die die Ebene des zu druckenden Knotens ist), wird pe-preserve-printdem aktuellen Knoten eine Markierungsklasse ( ) hinzugefügt. Hängt dann eine weitere Markierungsklasse ( pe-no-print) an alle Geschwister des aktuellen Knotens an, jedoch nur, wenn keine pe-preserve-printKlasse vorhanden ist . Als dritter Akt wird auch eine andere Klasse an erhaltene Ahnenelemente angehängt pe-preserve-ancestor.

Eine absolut einfache zusätzliche Nur-Druck-CSS blendet die entsprechenden Elemente aus und zeigt sie an. Einige Vorteile dieses Ansatzes sind, dass alle Stile beibehalten werden, kein neues Fenster geöffnet wird, nicht viele DOM-Elemente verschoben werden müssen und im Allgemeinen nicht invasiv für Ihr Originaldokument sind.

Weitere Informationen finden Sie in der Demo oder im entsprechenden Artikel .

Hier, was für mich funktioniert hat

Mit jQuery und https://developer.mozilla.org/en-US/docs/Web/API/Window/open

  var $linkToOpenPrintDialog = $('#tvcPrintThisLinkId');
  var windowObjectReference = null;
  var windowFeatures = 'left=0,top=0,width=800,height=900,menubar=no,toolbar=no,location=yes,resizable=no,scrollbars=no,status=no';
  var windowFeaturesStyles = '<link rel="stylesheet" media="print" href="https://stackoverflow.com/wp-content/themes/salient-child/dist/css/app-print.css">';

  $linkToOpenPrintDialog.on('click', function(event) {
    openPrintDialog(this.href, this.target, 'tvcInnerCalculatorDivId', event);    
    return false;
  });

  function openPrintDialog(url, windowName, elementToOpen, event) {

    var elementContent = document.getElementById(elementToOpen);

    if(windowObjectReference == null || windowObjectReference.closed) {

      windowObjectReference = window.open( url, windowName, windowFeatures);
      windowObjectReference.document.write(windowFeaturesStyles);
      windowObjectReference.document.write(elementContent.innerHTML);
      windowObjectReference.document.close();
      windowObjectReference.focus();
      windowObjectReference.print();
      windowObjectReference.close();

    } else {
      windowObjectReference.focus();
    };

    event.preventDefault();
  }

app-print.css

@media print { 

  body { 
    margin: 0; 
    color: black; 
    background-color: white;
  } 

}

Probier diese.

export function printSectionOfWebpage(sectionSelector) {
    const $body = jquery('body');
    const $sectionToPrint = jquery(sectionSelector);
    const $sectionToPrintParent = $sectionToPrint.parent();
    const $printContainer = jquery('<div style="position:relative;">');

    $printContainer.height($sectionToPrint.height()).append($sectionToPrint).prependTo($body);

    const $content = $body.children().not($printContainer).not('script').detach();

    /**
     * Needed for those who use Bootstrap 3.x, because some of
     * its `@media print` styles ain't play nicely when printing.
     */
    const $patchedStyle = jquery('<style media="print">')
        .text(
            `
          img { max-width: none !important; }
          a[href]:after { content: ""; }
        `
        )
        .appendTo('head');

    window.print();

    $body.prepend($content);
    $sectionToPrintParent.prepend($sectionToPrint);

    $printContainer.remove();
    $patchedStyle.remove();
}

Probieren Sie diese fantastische Ink-HTML- Bibliothek aus

import print from 'ink-html'
// const print = require('ink-html').default

// js
print(window.querySelector('#printable'))
// Vue.js
print(this.$refs.printable.$el)