「pre」要素を PDF として保存するときに CSS スタイルを保持するにはどうすればよいですか?

「pre」要素を PDF として保存するときに CSS スタイルを保持する

PDF 保存機能を使用して構文ハイライト機能を拡張するという探求において、重要な点は次のとおりです。見落とされがちな点は、CSS スタイルの保持です。従来のアプローチでは重要なスタイル情報が欠落した PDF が生成される可能性がありますが、CSS 属性を確実に忠実に転送するソリューションが存在します。

この質問に答えるために、鍵となるのは Web ブラウジング機能の組み合わせを活用することです。新しいブラウザ ウィンドウを動的に作成し、必要な HTML および CSS 要素を追加し、印刷機能を呼び出すことにより、通常の PDF 生成方法によって課せられる制限を回避できます。

次のコード スニペットは、このアプローチを示しています。

<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>

このコードでは、クリック ハンドラーは、CSS 要素からのスタイル情報とともに、「pre」要素の HTML コンテンツをキャプチャします。新しいポップアップ ウィンドウが作成され、結合された HTML 要素と CSS 要素がその本文に追加されます。ポップアップ ウィンドウで .focus() と .print() を呼び出すと、システムの印刷機能がトリガーされ、印刷ダイアログが開きます。 [ファイルに出力] を選択すると、元の CSS スタイルをすべてそのままにして出力を PDF として保存できます。

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