Pouze tisk?

Jak vytisknu uvedený div (bez ručního vypnutí veškerého ostatního obsahu na stránce)?

Chci se vyhnout novému dialogu náhledu, takže vytváření nového okna s tímto obsahem není užitečné.

Stránka obsahuje několik tabulek, jedna z nich obsahuje div, který chci vytisknout – tabulka je stylizovaná s vizuálními styly pro web, které by se neměly zobrazovat v tisku.

Odpověď

Zde je obecné řešení pomocí pouze CSS , u kterého jsem ověřil, že funguje.

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

Alternativní přístupy nejsou tak dobré. Pomocí display je složité, protože pokud má nějaký prvek display:none pak se nezobrazí ani jeden z jeho potomků. Chcete-li jej použít, musíte změnit strukturu své stránky.

Pomocí visibility funguje lépe, protože můžete zapnout viditelnost pro potomky. Neviditelné prvky však stále ovlivňují rozložení, takže přesunu section-to-print vlevo nahoře, aby se tiskl správně.