Pre 要素の PDF エクスポートで CSS スタイルを保持するにはどうすればよいですか?

事前要素の PDF エクスポートでの CSS スタイルの保持

強調表示されたコードを PDF として保存するオプションを提供する構文ハイライターのシナリオで、CSS スタイルを維持しますこれは、強調表示されたコードの美しさと機能を維持するために重要です。

CSS を使用して Pre 要素を PDF として保存

CSS スタイルを維持しながら Pre 要素を PDF として保存するには、次のアプローチを検討してください。 :

1. 新しいウィンドウを作成します: 新しいブラウザ ウィンドウを開きます。
2. HTML とスタイルを追加: プレの HTML を挿入します。関連するスタイルを含む要素を、新しいウィンドウのドキュメント本文に追加します。
3. フォーカスして印刷: 新しいウィンドウにフォーカスして、印刷プロセスを開始します。
4. システム印刷ダイアログ: システム印刷ダイアログで、[ファイルに出力] オプションを選択して、強調表示されたコードを PDF として保存します。

コード例

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // retrieve and append `style` element, or define inline styling
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

実装に関する考慮事項

• style 変数に style 要素または pre 要素に関連するインライン スタイル情報が含まれていることを確認します。
• 最適なフォーマットを確保するために、必要に応じて CSS メディア クエリを調整します。

結論

これらの手法を実装すると、CSS スタイルを維持しながら pre 要素を PDF として効果的に保存できるため、ユーザーは強調表示されたコードを簡単に共有およびアーカイブできるようになります。正確なプレゼンテーション。

以上がPre 要素の PDF エクスポートで CSS スタイルを保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。