Wydrukuj określoną część strony internetowej

Próbuję wydrukować określoną część mojej aplikacji.Wydrukuj określoną część strony internetowej

Aplikacja zawiera listę użytkowników, wyświetlającą swoje imię i nazwisko. Kiedy kliknę użytkownika, otrzymuję wyskakujące okienko z bardziej szczegółowymi informacjami na jego temat.

W jaki sposób mogę wydrukować tylko popup dla użytkownika, którego kliknąłem? popup wygląda następująco:

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

Przycisk drukowania nie działa jeszcze chociaż.

Źródło

2012-10-21 ItsGreg

możliwe duplikat [Print

tylko?] (http://stackoverflow.com/questions/468881/print-div-id-printarea-div -tylko) –

Możesz użyć prostego skryptu java do wydrukowania określonego elementu div strony.

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

Źródło

2012-10-21 10:58:16 pmtamal

+19

Uważaj, jeśli element div, który drukujesz z tym kodem, wymaga dowolnego CSS do renderowania w określony sposób. Jeśli tak będzie, musisz upewnić się, że dodasz go również do strony, używając 'WinPrint.document.write (cssLinkTag)'. –

Co się stanie, jeśli chcę zmienić orientację? – Si8

literówka na kodzie 'letf' ->' left' – Sharky

Trzeba by otworzyć nowe okno (lub przejdź do nowej strony) zawierające tylko informacje, które chcesz, aby użytkownik mógł wydrukować

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>

kilka uwag tutaj: kotwica nie może mieć odstępy między nim a div zawierającego treść do wydrukowania

Źródło

2012-10-21 10:56:47 SReject

To jest genialne! Oczywiście, jeśli nie chcesz, aby link do drukowania po produkcie, lub chcesz go nieco ładniej, masz pewne wyzwania. Rozwiązałem to wyzwanie, nadając hrefowi identyfikator, zmieniając drukowanie na nieprzecinające się miejsce i odwołując się do zdarzenia click() w innym miejscu za pomocą metody getElementById. Dziękuję Ci!! – Mmm

no - po prostu użyj CSS media = "print" –

Jak tu odpowiedzi: https://stackoverflow.com/a/1072151/421243, można dodać specjalną sekcję do ukrytej ramki z Javascript, koncentrują się go, a następnie je wydrukować.

Źródło

2015-02-04 22:32:01

To jest z javascript –

W funkcji printPageArea() należy przekazać określony identyfikator div, który ma zostać wydrukowany. Znalazłem ten kod JavaScript z codexworld.com.

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

Kompletny kod i poradnik można znaleźć tutaj - How to Print Page Area using JavaScript.

Źródło

2016-05-05 07:51:38 JoyGuru

Zrobiłem to rozszerzenie jQuery wydrukować HTML elementu zaznaczonego: $('#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; 
    } 
});

zobaczyć go w akcji here.

Źródło

2016-10-13 14:03:56

Nie działa dla mnie z Chrome. Poza tym powinieneś spróbować umieścić swój kod tutaj w odpowiedzi. – Mike

Myślę, że zamiast szaleńczego odrzucania kogoś, kto opublikował łatwą do odzyskania odpowiedź, my jako społeczność możemy faktycznie _nie_ przestraszyć ich komentując i po prostu kopiując ten przeklęty kod na siebie v_v Nie oczekuj, że wszyscy będą tak bliscy z zawiłościami etykiety StackOverflow ... – fresskoma

Dzięki, ale dlaczego nie można dodać plików CSS? –

Zamiast całej skomplikowanej JavaScript, rzeczywiście można to osiągnąć w prosty CSS: wystarczy użyć dwóch plików CSS, dla swojego normalnego wyświetlania ekranu, a drugi do wyświetlania TYLKO zawartość chcesz wydrukować. W tym ostatnim pliku ukryj wszystko, czego nie chcesz drukować, wyświetlaj tylko wyskakujące okienko.

Pamiętaj, aby zdefiniować atrybut obu plikach CSS media:

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

Źródło

2017-03-30 06:48:10

-1

Tu jest moja udoskonalona wersja, że jeśli chcemy, aby załadować pliki CSS lub istnieją odniesienia obraz w części wydrukować.

W takich przypadkach musimy poczekać, aż pliki css lub obrazy zostaną w pełni załadowane przed wywołaniem funkcji print(). Dlatego lepiej przenieść wywołania funkcji print() i close() do html.Oto przykład kodu:

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

Źródło

2017-07-04 03:29:03 hailong

Po prostu użyj CSS, aby ukryć treści, których nie chcesz drukować. Gdy użytkownik wybierze print - strona będzie wyglądała na „multimedialne =” print print « CSS ma instrukcji, aby ukryć zawartość” CSS dla instrukcji o układzie strony

W multimedialne =». że nie chcemy wydrukować.

 <style type="text/css" media="print"> #SCREEN_VIEW_CONTAINER{ display: none; } .other_print_layout{ background-color:#FFF; } </style>  <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>

Źródło

2018-01-11 21:09:15 Stnfordly

To działa dobrze - i jest takie łatwe i jasne - dzięki! :) –

Wydrukuj określoną część strony internetowej

Odpowiedz

Powiązane problemy