Tylko druk?

Question

Tylko druk?

Jak wydrukować wskazany div (bez ręcznego wyłączania wszystkich innych treści na stronie)?

Chcę uniknąć nowego okna podglądu, więc tworzenie 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 na style wizualne dla sieci, które nie powinny być wyświetlane w druku.

356

javascript css printing dhtml

Author: Pikamander2, 2009-01-22

Source

26 answers

Mam lepsze rozwiązanie z minimalnym kodem.

Umieść swoją wydrukowaną część wewnątrz div o id takim jak:

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

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

Następnie dodać zdarzenie jak onclick (jak pokazano powyżej), i przekazać id div jak 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? Żadnych wyskakujących okien, żadnych szalonych stylów, żadnych bibliotek JS, takich jak jquery. Problem z naprawdę skomplikowanymi rozwiązaniami (odpowiedź nie jest skomplikowana i nie co mam na myśli) jest fakt, że nigdy nie będzie tłumaczyć na wszystkich przeglądarkach, nigdy! Jeśli chcesz zmienić style, postępuj zgodnie z zaznaczoną odpowiedzią, dodając atrybut media do łącza arkusza stylów (media= "print").

Bez puchu, lekki, po prostu działa.

209

Author: Kevin Florida,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-23 17:37:23

Wszystkie odpowiedzi do tej pory są dość błędne - albo wymagają dodania class="noprint" do wszystkiego, albo zepsują display wewnątrz #printable.

Myślę, że najlepszym rozwiązaniem byłoby stworzenie wrappera wokół rzeczy 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ż wiąże się to z poruszaniem rzeczy w Twoim HTML...

116

Author: Greg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-22 12:28:28

Z jQuery jest to tak proste:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

102

Author: romaninsh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-06 12:57:54

Czy możesz użyć print stylesheet i użyć CSS do uporządkowania treści, które chcesz wydrukować? przeczytaj ten artykuł aby uzyskać więcej wskazówek.

21

Author: Paul Dixon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-22 12:12:20

To działa dobrze:

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

Zauważ, że działa to tylko z "widocznością". "display" tego nie zrobi. Testowany w FF3.

19

Author: Christian Maioli M.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-04 19:18:34

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

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

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

Używanie widoczności może powodować wiele problemów z odstępami i pustymi stronami. Dzieje się tak dlatego, że widoczność utrzymuje przestrzeń elementów, po prostu sprawia, że jest ona ukryta, gdzie as display usuwa ją i pozwala innym elementom zająć jej miejsce.

Powód, dla którego To rozwiązanie działa jest to, że nie są chwytając wszystkie elementy, tylko bezpośrednie dzieci ciała i ukrywanie ich. Pozostałe rozwiązania poniżej z display css, ukrywają wszystkie elementy, co wpływa na wszystko wewnątrz zawartości wydruku.

Nie sugerowałbym javascript, ponieważ trzeba by mieć przycisk drukowania, który użytkownik kliknie, a standardowe przyciski drukowania przeglądarki nie mają takiego samego efektu. Jeśli naprawdę trzeba to zrobić, co bym zrobił, to przechowywać html ciała, usunąć wszystkie niechciane elementy, wydrukować, a następnie dodać html z powrotem. Jak jednak wspomniano, chciałbym tego uniknąć, jeśli możesz i użyć opcji CSS, jak powyżej.

Uwaga: możesz dodać dowolny CSS do Drukuj CSS za pomocą stylów inline:

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

Lub jak zwykle używam jest tag link:

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

12

Author: fanfavorite,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 18:00:39

Podaj dowolny element, który chcesz wydrukować id printMe.

Dołącz ten skrypt do 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łanie funkcji

<a href="javascript:void(processPrint());">Print</a>

7

Author: Jason Plank,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-14 16:06:40

Hm ... użyj typu arkusza stylów do drukowania ... eg:

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

Drukuj.css:

div { display: none; }
#yourdiv { display: block; }

6

Author: Andreas Niedermair,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-22 12:13:15

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

6

Author: Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-07 16:28:22

Krok 1: Napisz następujący javascript wewnątrz twojej głowy tag

<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łanie funkcji 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>

6

Author: Hardik Thaker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-22 16:49:36

W CSS 3 możesz użyć:

body *:not(#printarea) {
    display: none;
}

2

Author: Gumbo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-22 12:14:31

Podniosłem zawartość za pomocą JavaScript i stworzyłem okno, które mógłbym zamiast niego wydrukować...

2

Author: noesgard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-03 13:06:46

Metoda Sandro działa świetnie.

Poprawiłem go, aby umożliwić wielokrotne łącza printMe, szczególnie do wykorzystania na stronach z kartami i rozwijającym się tekście.

function processPrint(printMe){

var printReadyElem = document.getElementById(printMe);

<a href="javascript:void(processPrint('divID'));">Print</a>

2

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-19 19:58:57

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ć dowolny z kilku konkretnych obszarów. Moje rozwiązanie, dzięki wielu z powyższych, pozwala określić dowolny obiekt div do wydrukowania.

Kluczem tego rozwiązania jest dodanie odpowiedniej reguły do arkusza stylów mediów drukowanych, aby żądany div (I jego zawartość) był drukowane.

Najpierw Utwórz potrzebny print css, aby ukryć wszystko (ale bez konkretnej 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>

Zauważ, że Dodałem nowe zasady klasy:

noprintarea pozwala na powstrzymanie drukowania elementów w Twoim div - zarówno zawartości, jak i bloku.
noprintcontent pozwala na powstrzymanie drukowania elementów w Twoim div - treść jest tłumiona, ale i przydzielony obszar pozostaje pusty.
print pozwala na wyświetlanie elementów w wersji drukowanej, ale nie na stronie ekranu. Zwykle będą one miały "display:none" dla stylu ekranu.

Następnie wstaw trzy funkcje JavaScript. Pierwszy tylko włącza i wyłącza arkusz stylów mediów drukowanych.

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

Drugi wykonuje prawdziwą pracę, a trzeci sprząta później. Drugi (printDiv) aktywuje arkusz stylów mediów drukowanych, a następnie dodaje Nowa reguła pozwalająca na drukowanie żądanego div, powoduje drukowanie, a następnie dodaje opóźnienie przed ostatecznym porządkowaniem (w przeciwnym razie style mogą zostać zresetowane przed wydrukowaniem.)

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

Funkcja końcowa usuwa dodaną regułę i ponownie ustawia 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);
}

Jedyną rzeczą do zrobienia jest dodanie jednej linii do przetwarzania onload, aby styl drukowania był początkowo wyłączony, umożliwiając tym samym całą stronę drukowanie.

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

Następnie, z dowolnego miejsca w dokumencie, możesz wydrukować div. Po prostu wydaj printDiv ("thedivid") z przycisku lub cokolwiek innego.

Duży plus dla tego podejścia zapewnia ogólne rozwiązanie do drukowania wybranej treści z poziomu strony. Umożliwia również wykorzystanie istniejących stylów dla elementów, które są drukowane - w tym zawierającego div.

Uwaga: w mojej implementacji musi to być pierwszy arkusz stylów. Zmień odnośniki do arkusza (0) Na odpowiednie numer arkusza, jeśli chcesz zrobić go później w sekwencji arkusza.

2

Author: DrDave,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-23 03:41:24

@ Kevin Florida Jeśli masz kilka div z tą samą klasą, 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>

Używałem Colorbox Inner content type

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

2

Author: Stefan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-15 08:19:09

W moim przypadku musiałem wydrukować obraz wewnątrz strony. Kiedy użyłem rozwiązania głosowałem, miałem 1 pustą stronę, a drugi pokazujący 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>

2

Author: Raphael Monteiro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-17 14:18:10

Użyj specjalnego arkusza stylów do drukowania

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

A następnie Dodaj klasę np. "noprint" do każdego tagu, którego zawartość nie chcesz drukować.

W CSS użyj

.noprint {
  display: none;
}

1

Author: Xn0vv3r,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-22 12:14:11

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

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

1

Author: Jason Plank,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-14 16:05:21

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

}

1

Author: pmrotule,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-27 17:47:42

Możesz użyć oddzielnego stylu CSS, który wyłącza każdą inną zawartość z wyjątkiem tej o id "printarea".

Zobacz CSS Design: Going to Print dla dalszych wyjaśnień i przykładów.

1

Author: Kosi2801,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-23 05:20:41

Miałem wiele obrazów, każdy z przyciskiem i musiałem kliknąć przycisk, aby wydrukować każdy div z obrazem. To rozwiązanie działa, jeśli wyłączyłem 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!" />

1

Author: live-love,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-02 21:36:13

Jeszcze jedno approch bez wpływu na bieżącą stronę, a także utrzymuje css podczas drukowania. Tutaj selektor musi być konkretny selektor div, które treści 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 jakiś czas temu pokażesz, że zewnętrzny css zostanie do niego zastosowany.

1

Author: Mukesh Kumar Suman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-15 05:22:13

Próbowałem wielu rozwiązań.Żaden z nich nie działał idealnie. Albo tracą powiązania CSS lub JavaScript. Znalazłem idealne i łatwe rozwiązanie, które nie traci CSS ani JavaScript powiązania.

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

1

Author: BibanCS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-08 11:38:43

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:visible i visibility:hidden css razem z @media print{}

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

0

Author: 0xC0DEGURU,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-05 13:21:42

Najlepszy css do dopasowania pustej wysokości 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;
  }
}

0

Author: TRI ÂN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 08:20:53

score 617 · Accepted Answer

Oto ogólne rozwiązanie, używającCSS tylko , które zweryfikowałem do działania.

@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ą zbyt dobre. Użycie {[1] } jest trudne, ponieważ jeśli jakikolwiek element ma display:none, to żaden z jego potomków nie wyświetli się. Aby go użyć, musisz zmienić strukturę swojej strony.

Używanie visibility działa lepiej, ponieważ można włączyć widoczność dla potomków. Niewidoczne elementy nadal wpływają na układ, więc przesuwam section-to-print do lewego górnego rogu, aby wydrukować jak należy.