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

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

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

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>

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

źródło

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

Możesz użyć tego: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Lub użyj właściwości visibility:visiblei visibility:hiddencss razem z@media print{}

„display: none” ukryje wszystkie zagnieżdżone „display: block”. To nie jest rozwiązanie.

0xC0DEGURU
ź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

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

Odpowiedzi: