Czy drukować tylko <div id = „printarea”> </div>?

444

Jak wydrukować wskazany plik div (bez ręcznego wyłączania całej innej zawartości na stronie)?

Chcę uniknąć nowego okna podglądu, więc utworzenie nowego okna z tą zawartością nie jest przydatne.

Strona zawiera kilka tabel, jedna z nich zawiera div, który chcę wydrukować - tabela jest stylizowana za pomocą wizualnych stylów dla Internetu, które nie powinny być wyświetlane w druku.

javascript  css  printing  dhtml 
— noesgard
źródło
1
stackoverflow.com/questions/2255291/… ten link działa idealnie
— Jinna Balu

Odpowiedzi:

792

Oto ogólne rozwiązanie, wykorzystujące tylko CSS , które zweryfikowałem do pracy.

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

Alternatywne podejścia nie są tak dobre. Używanie displayjest trudne, ponieważ jeśli jakikolwiek element ma, display:noneżaden z jego potomków nie wyświetli. Aby z niego skorzystać, musisz zmienić strukturę swojej strony.

Używanie visibilitydziała lepiej, ponieważ możesz włączyć widoczność potomków. Niewidoczne elementy wciąż wpływają na układ, więc przechodzę section-to-printdo lewego górnego rogu, aby drukować poprawnie.

— Bennett McElwee
źródło
21
jest to zdecydowanie najszybszy i najczystszy sposób, zastanawiam się, dlaczego ta odpowiedź nie uzyskała największej liczby głosów -.-
— Dany Khalife
34
Problemem, na który należy uważać, jest to, że w niektórych przypadkach możesz wydrukować tysiące pustych stron. W moim przypadku udało mi się to rozwiązać za pomocą dodatkowego wyświetlacza: brak stylizacji dla wybranych elementów, ale być może bardziej ogólne rozwiązanie jest możliwe dzięki pewnej kombinacji wysokości wymuszania, przepełnienia: brak i absolutne pozycjonowanie dla wszystkich div lub coś.
— Malcolm MacLeod
5
To świetny początek, ale miałem z tym dwa kłopoty: na przykład, jeśli którykolwiek z rodziców elementu ustali własne pozycjonowanie względne / bezwzględne, zawartość nadal byłaby przesunięta, chyba że użyję position:fixedtego. Jednak Chrome i Safari również obcinają zawartość, szczególnie po pierwszej stronie. Więc moim ostatecznym obejściem było ustawienie zarówno celu, jak i wszystkich jego rodziców, naoverflow:visible; position:absolute !important; top:0;left:0
— natevw
1
@ dudeNumber4 #section-to-printpasuje do samej sekcji; #section-to-print *pasuje do każdego podelementu sekcji. Ta reguła powoduje, że sekcja i cała jej zawartość są widoczne.
— Bennett McElwee
3
Możesz wypróbować rozwiązanie JavaScript, ale to nie zadziała, jeśli użytkownik użyje polecenia Drukuj w przeglądarce.
— Bennett McElwee
243

Mam lepsze rozwiązanie z minimalnym kodem.

Umieść swoją część do wydruku w div z identyfikatorem takim jak ten:

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

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

Następnie dodaj wydarzenie, takie jak kliknięcie (jak pokazano powyżej) i przekaż identyfikator div, tak jak to zrobiłem powyżej.

Teraz stwórzmy naprawdę prosty 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;
}

Zauważ, jakie to proste? Bez wyskakujących okienek, bez nowych okien, bez szalonego stylu, bez bibliotek JS, takich jak jquery. Problem z naprawdę skomplikowanymi rozwiązaniami (odpowiedź nie jest skomplikowana i nie to, o czym mówię) polega na tym, że NIGDY nie da się jej przetłumaczyć na wszystkie przeglądarki! Jeśli chcesz, aby style były różne, wykonaj czynności przedstawione w zaznaczonej odpowiedzi, dodając atrybut media do łącza do arkusza stylów (media = „print”).

Bez puchu, lekki, po prostu działa.

— Kevin na Florydzie
źródło
@Kevin próbuję tego dla formularza, ale drukuje pusty formularz (bez danych) i potrzebuję wypełnionego formularza, aby wydrukować przed wysłaniem
— Arif
98
@asprin ostrzeżenie! To nie jest kod bez bałaganu. Użycie innerHTML do wymazania, a następnie odtworzenia całego ciała jest odpowiednie dla prostych stron, ale dzięki bardziej zaawansowanym dostosowaniom (menu, pokazy slajdów itp.) Może usunąć niektóre zachowania dynamiczne dodane przez inne skrypty.
— Christophe,
17
To rozwiązanie nie będzie działać na żadnej złożonej stronie, na której elementy w obszarze drukowania zależą od stylów i / lub pozycji elementów nadrzędnych. Jeśli wyodrębnisz plik div do wydruku, może on wyglądać zupełnie inaczej, ponieważ teraz brakuje wszystkich rodziców.
— Andrei Volgin,
1
Niestety nie działa dobrze w Chrome, jeśli zamkniesz okno podglądu wydruku, a następnie spróbujesz wykonać jQuery .click. Szkoda, bo kod jest tak lekki.
— rybo111,
3
@BorisGappov bardzo prosty przykład z jednym kliknięciem, aby udowodnić mój punkt: jsfiddle.net/dc7voLzt Powiem to jeszcze raz: to nie jest kod bez bałaganu! Problem nie dotyczy samego wydruku, chodzi o przywrócenie oryginalnej strony!
— Christophe
121

Wszystkie dotychczasowe odpowiedzi są dość błędne - albo polegają na dodawaniu class="noprint"do wszystkiego, albo będą się displayw nim bałaganić #printable.

Myślę, że najlepszym rozwiązaniem byłoby utworzenie opakowania wokół materiałów niedrukowalnych:

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

Oczywiście nie jest to idealne rozwiązanie, ponieważ wymaga nieco przesunięcia w kodzie HTML ...

— Greg
źródło
Myślę, że masz rację, ale jak zabić stylizację stołu otaczającego div (jeśli to możliwe, aby usunąć stylizację - mogę wydrukować tabelę i dość łatwo wykluczyć resztę zawartości
— noesgard
Używam Javascript do
— pobrania
9
Wolę używać semantycznego HTML. Formatowanie wydruku najlepiej obsługiwać w CSS. Zobacz moją odpowiedź, jak to zrobić: stackoverflow.com/questions/468881/...
— Bennett McElwee
Zgadzam się z Bennettem, korzystanie z widoczności zamiast wyświetlacza jest znacznie czystszym rozwiązaniem
— guigouz
Na dole tego wątku zrobiłem naprawdę proste rozwiązanie, które moim zdaniem lepiej odpowiada potrzebom pytającego. Nie opiera się na arkuszu stylów drukowania, można go poddać recyklingowi w całej witrynie i jest niezwykle lekki.
— Kevin Florida,
108

Z jQuery jest to tak proste:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
— romaninsh
źródło
3
Jest to całkiem fajne, choć pojawia się w Chrome jako zablokowane wyskakujące okienko.
— Rafi Jacoby
8
sztuką jest wywoływanie go w przypadku zdarzenia generowanego przez użytkownika, takiego jak kliknięcie myszą. możesz również dodać po pierwszym wierszu: alert if (! w) („Włącz wyskakujące okienka”);
— romaninsh
1
czy ktoś ma to działa na IE11? Po prostu otwiera okno, a następnie zamyka je natychmiast. Działa w Chrome, FF i na safari.
— greatwitenorth,
3
Zgubiłem css podczas drukowania z tym, czy jest jakiś sposób na utrzymanie css?
— Moxet Khan 21.04.16
2
@MoxetKhan, ten post ma rozwiązanie z css vevlo.com/how-to-print-div-content-using-javascript
— jeziora
22

Czy możesz użyć arkusza stylów drukowania i CSS, aby uporządkować treści, które chcesz wydrukować? Przeczytaj ten artykuł, aby uzyskać więcej wskazówek.

— Paul Dixon
źródło
Mam arkusz stylów drukowania - staram się unikać umieszczania reguły stylu we wszystkich innych treściach ...
— noesgard
Mam tabelę z włączonym stylem, zawierającą dany div, Jeśli ustawię wyświetlanie tabeli: brak - czy nadal mogę wyświetlać div?
— noesgard
Myślę, że tak, i możesz spróbować oznaczyć regułę jako! Ważne, aby ją wzmocnić!
— Paul Dixon
jeśli tabela nie jest wyświetlana, nie będzie to miało znaczenia, nawet jeśli div jest ustawiony na „display: awesome;”. Rodzic jest ukryty, podobnie jak dzieci. Czy jest to sytuacja, w której potrzebujesz tabeli, czy może to tylko układ strony?
— roborourke,
"Boom strzał w głowe!" według układów tabel. = |
— ANeves
19

Działa to dobrze:

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

Pamiętaj, że działa to tylko z „widocznością”. „display” tego nie zrobi. Testowane w FF3.

— Christian Maioli M.
źródło
15

Nie podoba mi się żadna z tych odpowiedzi jako całości. Jeśli masz klasę (powiedzmy printableArea) i masz ją jako bezpośrednie dziecko ciała, możesz zrobić coś takiego w swoim CSS wydruku:

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

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

Dla tych, którzy szukają printableArea w innym miejscu, musisz upewnić się, że wyświetlają się rodzice printableArea:

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

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

Korzystanie z widoczności może powodować wiele problemów z odstępami i pustych stron. Wynika to z faktu, że widoczność utrzymuje przestrzeń elementów, po prostu sprawia, że ​​jest ukryta, a gdy ekran ją usuwa, a inne elementy zajmują jej przestrzeń.

Powodem, dla którego działa to rozwiązanie, jest to, że nie chwytasz wszystkich elementów, tylko bezpośrednie dzieci ciała i chowasz je. Inne poniższe rozwiązania z display css, ukrywają wszystkie elementy, co wpływa na wszystko wewnątrz zawartości printableArea.

Nie sugerowałbym javascript, ponieważ musiałbyś mieć przycisk drukowania, który kliknie użytkownik, a standardowe przyciski drukowania przeglądarki nie będą miały takiego samego efektu. Jeśli naprawdę musisz to zrobić, chciałbym zapisać html body, usunąć wszystkie niechciane elementy, wydrukować, a następnie dodać html z powrotem. Jak już wspomniano, unikałbym tego, gdybyś mógł i używał opcji CSS takiej jak powyżej.

UWAGA: Możesz dodać dowolny CSS do wydruku CSS, używając stylów wbudowanych:

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

Lub, jak zwykle używam, jest tag linku:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
— fanfavorite
źródło
Co jeśli div, który chcesz wydrukować, nie jest „bezpośrednim dzieckiem ciała”? Próbuję to zrobić w vue.js .. Ale otrzymuję dużo pustych stron, gdy używam zaakceptowanej odpowiedzi.
— svenema
@ svenema, możesz użyć dowolnego CSS, jaki chcesz. To był tylko przykład.
— fanfavorite
hmm, mimo to, gdy próbuję tego, faktycznie nie ma żadnych dodatkowych pustych stron, ale div div do wydruku również nie jest wyświetlany; Mam tylko 1 pustą pustą stronę, kiedy używam tego kodu.
— svenema
Dowiedziałem się, że tak naprawdę jest to, ponieważ div printableArea nie jest bezpośrednim potomkiem tagu body, a gdy robię z niego bezpośrednie dziecko, twoje rozwiązanie działa; jednak w moim przypadku nie mogę uczynić printableArea bezpośrednim dzieckiem. Czy jest na to jakiś sposób?
— svenema
@ svenema, zobacz moją edycję powyżej.
— fanfavorite
8

  1. Podaj element, który chcesz wydrukować identyfikator printMe.

  2. Umieść ten skrypt w tagu head:

    <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. Wywołaj funkcję

    <a href="javascript:void(processPrint());">Print</a>
— Jason Plank
źródło
To dobra robota. Ale zbyt skomplikowane i nie będzie działać poprawnie w różnych przeglądarkach (zwłaszcza starszych przeglądarkach). Proponuję spojrzeć na moje rozwiązanie poniżej.
— Kevin Florida,
6

hm ... użyj rodzaju arkusza stylów do drukowania ... np .:

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

print.css:

div { display: none; }
#yourdiv { display: block; }
— Andreas Niedermair
źródło
To nie zadziała, jeśli dokument nie jest oparty na DIV lub #yourdiv zawiera również kolejne DIV.
— Gumbo
#yourdiv * {display: ...} jeśli umieścisz to na górze strony i będziesz mieć aktualną przeglądarkę, możesz pracować z większą liczbą selektorów, aby ukryć non divs
— Andreas Niedermair
„#yourdiv * {display: ...}” - czym powinien być ... bez zepsucia układu?
— Greg
Spowodowałoby to wyświetlenie elementów wbudowanych również jako elementów blokowych. Ale „#yourdiv, #yourdiv div {display: block}” to zrobi.
— Gumbo
@dittodhole - pomyśl o tym przez chwilę. Co możesz tam umieścić, żeby nie złamać układu w #yourdiv?
— Greg
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>

— Dilip Kr Singh
źródło
6
ładnie wyglądają, ale tracisz wszystkie wiązania javascript i inne po wydrukowaniu
— Julien,
1
Jest drukowany bez css.
— Moxet Khan
6

Krok 1: Napisz następujący kod JavaScript w tagu head

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

Krok 2: Wywołaj funkcję PrintMe („DivID”) przez zdarzenie onclick.

<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>
— Hardik Thaker
źródło
To jest jeden! Używał go do modalu i galerii. Brak błędów Javascript po zamknięciu. Naprawdę pomocne, zwłaszcza gdy używasz modów dłuższych niż jedna strona. Ładnie to podsumowuje. Idealny dla osób, które chcą drukować w sklepie.
— TheWeeezel,
2

W CSS 3 możesz użyć następujących opcji:

body *:not(#printarea) {
    display: none;
}
— Gumbo
źródło
Nie mogę tego użyć, obawiam się ... (popraw mnie, jeśli źle) strona, nad którą pracuję, to asp.net 1.1 / DHTML
— noesgard 22.01.2009
Zależy od przeglądarki, czy selektor: not () jest już dostępny, czy nie.
— Gumbo
Więc moja propozycja to tylko spojrzenie w przyszłość… Nie, poważnie. Właśnie wspomniałem o tym w celu uzupełnienia. Wiem, że obecnie nie jest to możliwe. Niestety.
— Gumbo
Możesz użyć jQuery i tego selektora, który (myślę) działałby w IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');
— David Heggie
2
ukryje to wszystkich potomków #printarea, ponieważ pasują do nich *: not (#printarea). Zasadniczo więc kończysz na pustym pojemniku.
— cytofu
2

Podniosłem zawartość za pomocą JavaScript i utworzyłem okno, które mogłem wydrukować zamiast ...

— noesgard
źródło
Czy możesz podzielić się kodem, ma problem z przyjęciem css
— Moxet Khan 21.04.16
2

Metoda Sandro działa świetnie.

Ulepszyłem go, aby umożliwić stosowanie wielu łączy printMe, szczególnie do stosowania na stronach z kartami i do rozwijania tekstu.

function processPrint(printMe){ <- wywołanie zmiennej tutaj

var printReadyElem = document.getElementById(printMe); <- usunął cudzysłowy wokół printMe, aby poprosić o zmienną

<a href="javascript:void(processPrint('divID'));">Print</a><- przekazanie identyfikatora div, który ma zostać wydrukowany, do funkcji przekształcającej zmienną printMe w identyfikator div. potrzebne są pojedyncze cytaty

2

printDiv (divId) : Uogólnione rozwiązanie do drukowania dowolnego div na dowolnej stronie.

Miałem podobny problem, ale chciałem (a) móc wydrukować całą stronę lub (b) wydrukować jeden z kilku określonych obszarów. Moje rozwiązanie, dzięki dużej części powyższych, pozwala określić dowolny obiekt div do wydrukowania.

Kluczem do tego rozwiązania jest dodanie odpowiedniej reguły do ​​arkusza stylów nośnika wydruku, aby wydrukować żądany plik div (i jego zawartość).

Najpierw utwórz potrzebny css drukowania, aby wszystko ukryć (ale bez określonej reguły zezwalającej na element, który chcesz wydrukować). 

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

Pamiętaj, że dodałem nowe reguły klasowe:

  • noprintarea pozwala ci zablokować drukowanie elementów w twoim div - zarówno zawartość, jak i blok.
  • noprintcontent pozwala ci pominąć drukowanie elementów w twoim div - zawartość jest pomijana, ale przydzielony obszar pozostaje pusty.
  • print pozwala mieć elementy, które pojawiają się w wersji drukowanej, ale nie na stronie ekranu. Zwykle będą miały „display: none” dla stylu ekranu.

Następnie wstaw trzy funkcje JavaScript. Pierwszy tylko włącza i wyłącza arkusz stylów nośnika wydruku.

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

Drugi wykonuje prawdziwą pracę, a trzeci czyści później. Drugi (printDiv) aktywuje arkusz stylów nośnika wydruku, a następnie dołącza nową regułę, aby umożliwić wydrukowanie żądanego pliku div, wydaje wydruk, a następnie dodaje opóźnienie przed ostatecznym porządkiem (w przeciwnym razie style można zresetować przed wydrukiem gotowy.) 

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

Ostatnie funkcje usuwają dodaną regułę i ponownie ustawiają styl drukowania na wyłączony, aby można było wydrukować całą stronę. 

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

Jedyne, co należy zrobić, to dodać jeden wiersz do przetwarzania obciążenia, aby styl drukowania był początkowo wyłączony, umożliwiając w ten sposób drukowanie całej strony. 

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

Następnie z dowolnego miejsca w dokumencie możesz wydrukować plik div. Wystarczy wydać printDiv („thedivid”) z przycisku lub cokolwiek innego.

Duży plus za to podejście stanowi ogólne rozwiązanie do drukowania wybranej zawartości z poziomu strony. Pozwala także na użycie istniejących stylów dla drukowanych elementów - w tym zawierającego div.

UWAGA: W mojej implementacji musi to być pierwszy arkusz stylów. Zmień odniesienia do arkusza (0) na odpowiedni numer arkusza, jeśli chcesz zrobić to później w kolejności arkuszy.

— DrDave
źródło
2

@Kevin Florida Jeśli masz wiele div z tej samej klasy, możesz użyć tego w następujący sposób:

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

korzystałem z wewnętrznego typu zawartości Colorbox

$(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);
});
— Stefan
źródło
2

W moim przypadku musiałem wydrukować obraz na stronie. Kiedy skorzystałem z głosowanego rozwiązania, miałem 1 pustą stronę, a drugą obraz. Mam nadzieję, że to komuś pomoże.

Oto css, którego użyłem:

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

Mój HTML to:

<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>
— Raphael Monteiro
źródło
2

Najlepsze css, aby dopasować wysokość pustej przestrzeni:

@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;
  }
}
— TRI ÂN
źródło
2

Najlepszy sposób na wydrukowanie konkretnego elementu Div lub dowolnego elementu

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}
— Mahetab
źródło
1

Do drukowania użyj specjalnego arkusza stylów

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

a następnie dodaj klasę, tj. „noprint” do każdego znacznika, którego treści nie chcesz wydrukować.

W użyciu CSS 

.noprint {
  display: none;
}
— Xn0vv3r
źródło
1

Jeśli chcesz tylko wydrukować ten div, musisz użyć instrukcji:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
— Jason Plank
źródło
1

Funkcja printDiv () pojawiła się kilka razy, ale w takim przypadku tracisz wszystkie elementy wiążące i wartości wejściowe. Tak więc moim rozwiązaniem jest utworzenie div dla wszystkiego o nazwie „body_allin” i innego poza pierwszym o nazwie „body_print”.

Następnie wywołujesz tę funkcję:

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

}
— pmrotule
źródło
Ta linia może być użyteczna, jeśli chcesz mieć unikalny identyfikator: printContents = printContents.replace (/ id = ("| ')) (. *?) (" |') / G, 'id = 1 $ 2_2 $ 3');
— pmrotule
1

Możesz użyć osobnego stylu CSS, który wyłącza każdą inną zawartość oprócz tej o identyfikatorze „printarea”.

Zobacz CSS Design: Going to Print, aby uzyskać dodatkowe wyjaśnienia i przykłady.

— Kosi2801
źródło
Zaktualizowano link do nowej lokalizacji. Byłoby miło skomentować zamiast opinii negatywnej.
— Kosi2801
1

Miałem wiele zdjęć z jednym przyciskiem i musiałem kliknąć przycisk, aby wydrukować każdy plik div z obrazem. To rozwiązanie działa, jeśli mam wyłączoną pamięć podręczną w przeglądarce, a rozmiar obrazu nie zmienia się w 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!" />
— żywa miłość
źródło
1

Jeszcze jedno zbliżenie bez wpływu na bieżącą stronę, a także utrzymuje css podczas drukowania. Tutaj selektor musi być specyficznym selektorem div, którą treść musimy wydrukować.

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

Tutaj pod warunkiem, że trochę czasu pokaże, że zewnętrzny css zostanie do niego zastosowany.

— Mukesh Kumar Suman
źródło
Czasami ładuję CSS, takie podejście chciałem ponownie załadować stronę przed wydrukowaniem. Dzięki
— Arpit Shrivastava
1

Wypróbowałem wiele z dostarczonych rozwiązań, ale żadne z nich nie działało idealnie. Tracą wiązania CSS lub JavaScript. Znalazłem idealne i łatwe rozwiązanie, które nie traci powiązań CSS ani JavaScript.

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>

JavaScript: 

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();
    }
— BibanCS
źródło
To otwarcie i utworzenie kolejnego okna, które nie działa na Androidzie. Działa tylko bezpośrednie window.print ().
— Merv
1

Jestem bardzo spóźniony na tę imprezę, ale chciałbym się przyłączyć z innym podejściem. Napisałem mały moduł JavaScript o nazwie PrintElements do dynamicznego drukowania części strony internetowej.

Działa poprzez iterację wybranych elementów węzła i dla każdego węzła przemierza drzewo DOM aż do elementu BODY. Na każdym poziomie, w tym początkowym (który jest poziomem węzła, który ma zostać wydrukowany), dołącza klasę znaczników ( pe-preserve-print) do bieżącego węzła. Następnie dołącza inną klasę znaczników ( pe-no-print) do wszystkich rodzeństwa bieżącego węzła, ale tylko wtedy, gdy nie ma pe-preserve-printna nich żadnej klasy. Jako trzeci akt dołącza także inną klasę do zachowanych elementów przodka pe-preserve-ancestor.

Dead-simple uzupełniający css tylko do wydruku ukryje i pokaże odpowiednie elementy. Niektóre zalety tego podejścia polegają na tym, że wszystkie style są zachowane, nie otwiera nowego okna, nie ma potrzeby poruszania się po wielu elementach DOM i ogólnie jest nieinwazyjny w przypadku oryginalnego dokumentu.

Zobacz wersję demonstracyjną lub przeczytaj powiązany artykuł w celu uzyskania dalszych szczegółów .

— András Szepesházi
źródło
0

Znalazłem rozwiązanie.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}
— użytkownik2573099
źródło
0

bazując na odpowiedzi @Kevin na Florydzie, zrobiłem sposób, aby uniknąć wyłączania skryptu na bieżącej stronie z powodu nadpisywania treści. Używam innego pliku o nazwie „printScreen.php” (lub .html). Zawiń wszystko, co chcesz wydrukować, w div „printSource”. I za pomocą javascript otwórz nowe okno, które wcześniej utworzyłeś („printScreen.php”), a następnie pobierz zawartość w „printSource” w górnym oknie.

Oto kod.

Główne okno : 

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

To jest „printScreen.php” - inny plik do pobrania zawartości do wydrukowania 

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>
— QeiNui
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.