ブラウザで CSS スタイルを維持しながらコード ブロックを PDF としてキャプチャするにはどうすればよいですか?

CSS を保持した強調表示された Pre 要素を PDF としてダウンロードする

CSS スタイルを保持しながら Pre 要素を PDF として保存するには、新しいウィンドウを開き、HTML と CSS を挿入し、PDF ファイルに印刷する方法です。

解決策:

1. 新しいウィンドウを開いてフォーカスします
2. pre 要素の HTML と必要な CSS スタイルを新しいウィンドウのドキュメント本文に追加します。
3. 新しいウィンドウで .focus() メソッドを呼び出します。
4. 呼び出し新しいウィンドウで .print() メソッドを実行します。
5. システムの印刷ダイアログで、[ファイルに出力] を選択し、PDF を保存します。

使用できる jQuery コードは次のとおりです。 :

$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});

以上がブラウザで CSS スタイルを維持しながらコード ブロックを PDF としてキャプチャするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。