[解決済み] Print <div id="printarea"></div> only?

Question

How do I print the indicated div (without manually disabling all other content on the page)?

I want to avoid a new preview dialog, so creating a new window with this content is not useful.

The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.

How to solved?

Here is a general solution, using CSS only , which I have verified to work.

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

Alternative approaches aren't so good. Using display is tricky because if any element has display:none の場合、その子孫はどれも表示されません。これを使うには、ページの構造を変更する必要があります。

使用方法 visibility は、子孫の可視性を有効にできるため、よりうまく機能します。しかし、見えない要素はまだレイアウトに影響を与えるので、私は section-to-print を左上に移動して、正しく印刷されるようにしました。