Wydrukuj zawartość DIV

335

Jaki jest najlepszy sposób wydrukowania zawartości DIV?

javascript jquery html printing test użytkownika
źródło
Spróbuj wydrukować element tutaj
Gabe,
1
Co rozumiesz przez druk? Jak w drukarce fizycznej?
Jurij Faktorowicz
„Wydrukować” jak w drukarce? lub do dokumentu?
Ed Schembor,
Znalazłem najlepszą wtyczkę opracowaną do tej pory przez etimbo github.com/etimbo/jquery-print-preview-plugin
MaxI
3
Tylko jako odniesienie dla każdego, kto próbuje znaleźć rozwiązanie tego problemu drukowania div. Znalazłem następującą odpowiedź bardzo przydatną: stackoverflow.com/a/7532581/405117
Vikram

Odpowiedzi:

517

Nieznaczne zmiany w stosunku do wcześniejszej wersji - przetestowane na 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;
}
Bill Paetzke
źródło
8
To jest szybkie rozwiązanie. Idealnym rozwiązaniem jest użycie osobnego CSS do drukowania. Być może możesz rozwinąć szczegóły (wymagania) swojego problemu.
Bill Paetzke
6
Możesz odwołać się do arkusza stylów w wyskakującym oknie. Dodaj kolejny wiersz kodu między znacznikami <head>: mywindow.document.write ('<link rel = "stylesheet" href = "main.css" type = "text / css" />');
Bill Paetzke,
5
@Rahil zmień to na: mywindow.document.close (); mywindow.focus (); mywindow.print (); mywindow.close ();
ROFLwTIME,
3
^ dodaj newwindow.focus (); aby włączyć drukowanie w różnych przeglądarkach.
JackMahoney
7
Zdarza się to czasem, gdy ładowanie podglądu wydruku się nie powiedzie, może wtedy, gdy treść do wydrukowania jest dość duża (zauważyłem to tylko w Chrome, podczas gdy ta sama strona drukuje się perfekcyjnie w Firefoksie, jednak nie wykluczam, że może się to zdarzyć w przeglądarce Firefox lub innych przeglądarkach). Najlepszym sposobem, jaki znalazłem, jest uruchomienie drukowania (i zamknięcie) dopiero po załadowaniu systemu Windows. Więc po: mywindow.document.write(data);Dodaj to: mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');I usuń: mywindow.print();imywindow.close();
Fabius
164

Myślę, że jest lepsze rozwiązanie. Spraw, aby div drukował na całym dokumencie, ale tylko wtedy, gdy jest wydrukowany:

@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;
    }
}
PNE.
źródło
Idealne, znacznie ładniejsze niż wyskakujące okienko.
GreenWebDev,
5
Niestety nie będzie działać w IE tak, jak oczekiwano, zobacz to: stackoverflow.com/questions/975129/…
jarek.jpa
16
Treść, która powinna przelać się na wiele stron, wydaje się być obcięta w Chrome.
Ishmael Smyrnow,
W przeglądarce IE musisz ukryć resztę dokumentu. Poniższa modyfikacja będzie działać: @media print {body * {display: none; } .myDivToPrint {display: block; kolor tła: biały; wysokość: 100%; szerokość: 100%; pozycja: stała; góra: 0; po lewej: 0; margines: 0; wypełnienie: 15 pikseli; rozmiar czcionki: 14px; wysokość linii: 18 pikseli; }}
RonnBlack
2
Może być konieczne wprowadzenie indeksu Z: 9999999; jeśli masz inne elementy umieszczone wyżej.
Adam M.
43

Chociaż powiedział to @gabe , jeśli używasz jQuery, możesz użyć mojej printElementwtyczki.

Jest próbka tutaj , a więcej informacji na temat wtyczki tutaj .

Użycie jest raczej proste, wystarczy pobrać element za pomocą selektora jQuery i wydrukować go:

$("#myDiv").printElement();

Mam nadzieję, że to pomoże!

Erik
źródło
14
8 lat później, to będzie produkować „a.browser jest niezdefiniowana” ponieważ wywołanie .browser została usunięta w jQuery 1.9
KingsInnerSoul
1
@KingsInnerSoul nie jest tak niegrzeczny wobec użytkowników jQuery, te czasy są dla nich wystarczająco trudne; p
Alexandre Daubricourt
22

Korzystając z Jquery, po prostu użyj tej funkcji:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

Twój przycisk wydruku będzie wyglądał następująco:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

Edycja: Jeśli masz dane formularza, które musisz zachować, klon nie skopiuje ich, więc musisz tylko pobrać wszystkie dane formularza i zastąpić je po przywróceniu w następujący sposób:

<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>
Gary Hayes
źródło
$ ('body'). html (restorepage); nie będzie działać, ponieważ w tym czasie nie ma dostępnego elementu ciała. dlatego lepiej będzie zastąpić go parametrem location.reload ();
Debugger
Nie. Jeśli przeładujesz stronę, usuniesz wszelkie informacje w formularzach lub wszelkie inne ustawienia, które mogą być konieczne. Działa idealnie dobrze. Jeśli poświęcisz trochę czasu na zapoznanie się z kodem, zobaczysz, że zmienna strona przywracania MNIE udostępnia wszystkie informacje o stronie, aby dokonać zamiany. Przestań próbować edytować mój kod i przetestuj go sam lub dowiedz się, co robią poszczególne części funkcji.
Gary Hayes
To jest lepsze. Obejmuje projekt strony podczas drukowania, w przeciwieństwie do tych wymienionych powyżej, w których nadal muszę umieszczać linki css z nagłówka itp. Dzięki!
Jorz,
sposób, w jaki zdałeś, eljest okropny, szczególnie od czasu użycia jQ. O wiele lepiej po prostu zdać selectori pozbyć się mocno zakodowanych#
RozzA
Zawsze korzystałem z tej metody dzisiaj, zauważyłem, że nie działa ona poprawnie na urządzeniu z Androidem (Google Chrome). Obszar wydruku strony zmienia się za każdym razem i zawiera dodatkowe części el. Myślę, że polecenie drukowania jest wysyłane podczas przywracania ciała.
Ali Sheikhpour
18

Stąd 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>
huston007
źródło
1
potrzebowała modyfikacji, aby podzielić stopkę na 2 części. ponieważ brwoser używa „</body>” jako głównego końca bieżącej strony. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;
mirzaei
13

Użyłem Bill Paetzkeodpowiedzi, aby wydrukować div zawierający obrazy, ale nie działało to z Google Chrome

po prostu musiałem dodać ten wiersz, myWindow.onload=function(){aby działał, a oto pełny kod

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

także jeśli ktoś po prostu musi wydrukować div z identyfikatorem, nie musi ładować jquery

tutaj jest czysty kod javascript, aby to zrobić

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

mam nadzieję, że to może komuś pomóc

Robert
źródło
To zadziałało dla mnie! Camelcase jednak mnie ugryzł, ponieważ w oryginalnej odpowiedzi użyto „mywindow” vs. „myWindow”. Dzięki!
opcode
12 
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;
}

Spowoduje to wydrukowanie divżądanego obszaru i przywrócenie zawartości tak, jak była. printdivnamejest divdo wydrukowania.

Techie
źródło
potrzebowała modyfikacji, aby podzielić stopkę na 2 części. ponieważ brwoser używa „</body>” jako głównego końca bieżącej strony. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;
mirzaei
To genialne! Ale tak, potrzebujesz hackowania od Mirzaei, w przeciwnym razie psuje się tag body i dostajesz zepsute formatowanie. Dzięki hackowi działa to świetnie! Możesz także dodać własne opakowanie wewnętrzne, aby ułatwić specjalne style drukowania. To powinna być zaakceptowana odpowiedź.
user2662680,
9

Utwórz osobny arkusz stylów drukowania, w którym ukryje się wszystkie inne elementy oprócz zawartości, którą chcesz wydrukować. Oflaguj go za pomocą 'media="print"podczas ładowania:

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

Pozwala to na załadowanie zupełnie innego arkusza stylów do wydruków.

Jeśli chcesz zmusić okno dialogowe drukowania przeglądarki do wyświetlenia dla strony, możesz to zrobić w następujący sposób po załadowaniu za pomocą JQuery:

$(function() { window.print(); });

lub wywołane innym zdarzeniem, na przykład przez kliknięcie przycisku przez użytkownika.

Carl Russmann
źródło
2
Tak, to też zadziała; trudno - cóż, niemożliwe - dokładnie wiedzieć, jaki jest scenariusz.
Pointy
Zgadzam się, że osobny CSS jest idealnym rozwiązaniem. A skopiowanie zawartości div do nowego okna jest szybkim rozwiązaniem.
Bill Paetzke,
9

Myślę, że dotychczas zaproponowane rozwiązania mają następujące wady:

  1. Rozwiązania zapytań o media CSS zakładają, że jest tylko jeden div do wydrukowania.
  2. Rozwiązania javascript działają tylko w niektórych przeglądarkach.
  3. Zniszczenie zawartości okna nadrzędnego i ponowne utworzenie, co powoduje bałagan.

Poprawiłem powyższe rozwiązania. Oto coś, co przetestowałem, które działa naprawdę dobrze z następującymi korzyściami.

  1. Działa na wszystkich przeglądarkach, w tym IE, Chrome, Safari i Firefox.
  2. Nie niszczy i nie ładuje ponownie okna nadrzędnego.
  3. Może wydrukować dowolną liczbę DIV na stronie.
  4. Używa szablonów HTML, aby uniknąć podatności na konkatenację ciągów znaków.

Najważniejsze punkty do zapamiętania:

  1. Muszą mieć onload = "window.print ()" w nowo utworzonym oknie.
  2. Nie wywołuj funkcji targetwindow.close () lub targetwindow.print () od rodzica.
  3. Upewnij się, że wykonujesz targetwindow.document.close () i target.focus ()
  4. Używam jquery, ale możesz również wykonać tę samą technikę, używając zwykłego javascript.
  5. Możesz to zobaczyć w akcji tutaj http://math.tools/table/multiplication . Możesz wydrukować każdą tabelę osobno, klikając przycisk drukowania w nagłówku pola.

<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>
Rozwiń fragment kodu

dors
źródło
To było doskonałe i działało w wielu przeglądarkach znacznie lepiej niż akceptowane wyniki!
dama_do_bling
7

Stworzyłem wtyczkę do rozwiązania tego scenariusza. Byłem niezadowolony z wtyczek i postanowiłem uczynić coś bardziej rozbudowanym / konfigurowalnym.

https://github.com/jasonday/printThis

Jason
źródło
1
Wielkie dzięki za ciężką pracę, Jason ..... !! Naprawdę zamierzam użyć w moich więcej projektach. Co za oszałamiający człowiek z
6

Przyjęte rozwiązanie nie działało. Chrome drukował pustą stronę, ponieważ nie ładował obrazu na czas. To podejście działa:

Edycja: Wygląda na to, że zaakceptowane rozwiązanie zostało zmodyfikowane po moim poście. Dlaczego głosowanie negatywne? To rozwiązanie również działa.

    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;
    }
żywa miłość
źródło
4

Wiem, że to stare pytanie, ale rozwiązałem ten 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;
    }
  }
Zgrzytliwy
źródło
3

Chociaż odpowiedź @BC była najlepsza do wydrukowania pojedynczej strony.

Ale Aby wydrukować wiele stron formatu A4 jednocześnie za pomocą klawiszy Ctrl + P, pomocne może być następujące rozwiązanie. 

@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;
}}
arslan
źródło
2
  • Otwórz nowe okno
  • Otwórz obiekt dokumentu nowego okna i zapisz w nim prosty dokument, który nie zawiera nic oprócz posiadanego pliku div i niezbędnego nagłówka HTML itp. - możesz również chcieć, aby dokument pobierał arkusz stylów, w zależności od zawartości
  • Umieść skrypt na nowej stronie, aby wywołać window.print ()
  • Uruchom skrypt
Pointy
źródło
2

Oto moja wtyczka do drukowania 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);
karaxuna
źródło
2

Jeśli chcesz mieć wszystkie style z oryginalnego dokumentu (w tym style wbudowane), możesz użyć tego podejścia.

  1. Skopiuj cały dokument
  2. Zamień korpus na element, który chcesz wydrukować.

Realizacja:

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)
  }   
}
Stefan Norberg
źródło
2
Nie wiem, czy to najlepsze rozwiązanie, ale działało idealnie. Dzięki!
BRogers
2

Uwaga: Działa to tylko z witrynami obsługującymi jQuery

Dzięki tej fajnej sztuczce jest to bardzo proste. To działało dla mnie w przeglądarce Google Chrome . Firefox nie pozwala na drukowanie do formatu PDF bez wtyczki.

  1. Najpierw otwórz inspektora za pomocą (Ctrl + Shift + I) / (Cmd + Opcja + I).
  2. Wpisz ten kod w konsoli:
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
  1. Uruchamia okno dialogowe drukowania. Zrób fizyczny wydruk lub zapisz go w formacie PDF (w chromie). Gotowy!

Logika jest prosta. Tworzymy nowy tag skryptu i dołączamy go przed zamykającym tagiem body. Wstrzyknęliśmy rozszerzenie druku jQuery do HTML. Zmień myDivWithStyles za pomocą własnego identyfikatora tagu Div. Teraz trzeba się zająć przygotowaniem wirtualnego okna do wydruku.

Wypróbuj na dowolnej stronie. Tylko zastrzeżenie jest czasami trudne, CSS może powodować brak stylów. Ale treść dostajemy najczęściej.

Naren Yellavula
źródło
1

W Operze spróbuj:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();
mroczny
źródło
1

Oto rozwiązanie IFrame, które działa dla IE i 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);
}
Kofifus
źródło
1

Utworzono coś ogólnego do użycia w dowolnym elemencie 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();

Mam nadzieję że to pomoże.

Gauraw
źródło
1

Zmodyfikowałem odpowiedź @BillPaetski, aby użyć querySelector, dodać opcjonalny CSS, usunąć wymuszony tag H1 i opcjonalnie określić tytuł lub wyciągnąć z okna. Nie drukuje już również automatycznie i ujawnia elementy wewnętrzne, dzięki czemu można je wyłączyć w funkcji otoki lub w dowolny sposób.

Jedynymi dwoma prywatnymi zmiennymi są tmpWindow i tmpDoc, chociaż uważam, że dostęp do tytułu, css i elem może się różnić, należy założyć, że wszystkie argumenty funkcji są prywatne.

Kod: 
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;
}
Stosowanie: 
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
MrMesees
źródło
Ponadto nie kopiuje wartości <input>elementów. Jak mogę tego użyć, w tym co wpisał użytkownik?
Malcolm Salvador,
@ Malky.Kid proszę pomyśleć o tym, o co pytasz. Jeśli chcesz wydrukować formularz, musisz zahaczyć rozmycie wydarzenia na elementów formularza, i ustawić wartość atrybutu, Wybrane domyślne i innerText z <input>, <select>,<textarea> compontents być ich wartość wykonawcze. Istnieją alternatywy, ale nie jest to problem z tym skryptem, ale problem ze sposobem działania przeglądarek i uzyskania innerHTMLwłaściwości dokumentów z
danymi
Dotarłem już do rozwiązania za pośrednictwem .attr('value',). Zrobiłem to nawet dla textarea (poprzez dołączenie) i pól wyboru ( .attr('checked',)). Jestem przepraszam , gdybym nie myślał wystarczająco dużo o co prosiłem.
Malcolm Salvador,
Chcesz podzielić się z klasą? może istota lub coś w komentarzach. Głosuję za tym.
MrMesees
0

Poniższy kod kopiuje wszystkie odpowiednie węzły, które są celem selektora zapytania, kopiuje ich style widoczne na ekranie, ponieważ brakuje wielu elementów nadrzędnych używanych do celowania selektorów css. Powoduje to pewne opóźnienie, jeśli istnieje wiele węzłów potomnych z wieloma stylami.

Idealnie byłoby mieć gotowy arkusz stylów drukowania, ale jest to przydatne w przypadkach, w których nie ma potrzeby wstawiania arkusza stylów drukowania i chcesz drukować jak widać na ekranie.

Jeśli skopiujesz poniższe elementy w konsoli przeglądarki na tej stronie, wydrukowane zostaną wszystkie fragmenty kodu na tej stronie.

+function() {
    /**
     * copied from  /programming/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')
Tschallacka
źródło
0

To jest naprawdę stary post, ale tutaj jest jedna moja aktualizacja, którą zrobiłem, używając poprawnej odpowiedzi. Moje rozwiązanie korzysta również z jQuery.

Chodzi o to, aby używać właściwego widoku wydruku, dołączać wszystkie arkusze stylów do prawidłowego formatowania, a także być obsługiwane w większości przeglądarek.

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

Później potrzebujesz czegoś takiego:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

Spróbuj.

Ivijan Stefan Stipić
źródło
-1

To samo co najlepsza odpowiedź, na wypadek, gdybyś musiał wydrukować obraz tak jak ja:

Jeśli chcesz wydrukować obraz:

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;
    }
Goran Jakovljevic
źródło
Brakuje loadzdarzenia w wyskakującym okienku. Bez niego wydrukujesz pustą stronę, ponieważ obraz nie jest ładowany. =>$(popup).load(function(){ popup.focus(); popup.print(); });
Tim Vermaelen
-4

Najlepszym sposobem na to byłoby przesłanie zawartości div na serwer i otwarcie nowego okna, w którym serwer mógłby umieścić te treści w nowym oknie.

Jeśli nie jest to opcja, możesz spróbować użyć języka po stronie klienta, takiego jak javascript, aby ukryć wszystko na stronie oprócz tego div, a następnie wydrukować stronę ...

Sonny Boy
źródło
1
Nie trzeba go przesyłać na serwer. Możesz otworzyć okno przeglądarki, ustawić zawartość i wywołać polecenie drukowania.
Jonathon Faust
Możesz utworzyć nowe okno z klienta.
Pointy
1
Jonathon: Podoba mi się to rozwiązanie. Czy masz jakiś przykładowy kod?
test użytkownika