シンタックス ハイライターの Pre 要素を PDF として保存するときに CSS スタイルを保持する方法

CSS スタイルを保持しながらシンタックス ハイライターの Pre 要素を PDF として保存する方法

シンタックス ハイライターの Pre 要素を PDF として保存するにはCSS を維持する場合は、次の代替アプローチを検討してください:

解決策:

1. 新しいウィンドウを作成する: window を使用して新しいブラウザ ウィンドウを開きます。 .open().
2. HTML と CSS を追加します: pre 要素の HTML コンテンツ ($("#output")[0].outerHTML) と必要な CSS スタイル ( $("style")[0].outerHTML) を新しいウィンドウの本文に追加します。
3. Focus and Print: 新しいウィンドウで .focus() と .print() を呼び出します。 。これにより、システムの印刷ダイアログがトリガーされ、「ファイルに出力」を選択して pre 要素を PDF として保存できるようになります。

jQuery 実装:

<code class="javascript">$("#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();
});</code>

デモ:

このソリューションの動作は次の jsfiddle で確認できます: http://jsfiddle.net/tn04Ldka/2/

以上がシンタックス ハイライターの Pre 要素を PDF として保存するときに CSS スタイルを保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。