ホームページ > ウェブフロントエンド > CSSチュートリアル > ✨ div を印刷するための簡単なトリック

✨ div を印刷するための簡単なトリック

WBOY
リリース: 2024-08-02 04:25:02
オリジナル
757 人が閲覧しました

✨ Simple trick for printing a div

利点

  • 印刷後もページのインタラクティブ性が維持されます
  • フレームワークとうまく連携します
  • 印刷用に UI を複製する必要はありません

ステップ

  1. 印刷モードのときにページのすべてのコンテンツを非表示にします
  2. ターゲット要素を印刷モードで表示します

ステップ1

@media print {
  body {
    visibility: hidden;
  }
}
ログイン後にコピー

ステップ2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}
ログイン後にコピー

次に印刷します

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());
ログイン後にコピー

この方法では、インタラクティブ性が失われるという落とし穴を回避できます。他の方法では、ページ コンテンツ全体が静的 HTML に置き換えられるため、インタラクティブ性が失われます。

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
ログイン後にコピー

以上が✨ div を印刷するための簡単なトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート