CSS スタイルを保持したまま HTML コンテンツを PDF として保存するにはどうすればよいですか?

CSS を含む HTML コンテンツを PDF として保存する

Web 開発では、コンテンツを別の形式にエクスポートする場合でも、見た目の美しさを維持することが重要です。 HTML 要素を PDF として保存しようとすると、CSS スタイルが変換プロセス中に失われる可能性があるため、問題が発生する可能性があります。

保存された PDF で CSS を保持することが不可欠な場合は、次のアプローチの利用を検討してください。

1. 新しいウィンドウの作成: コンテンツを PDF として保存するための専用の新しいブラウザ ウィンドウを開きます。
2. HTML と CSS を追加:保存したい要素の HTML コードを、新しいウィンドウのドキュメント本文に追加します。さらに、要素の外観に必要な CSS スタイルを含めます。
3. フォーカスして印刷: 新しいウィンドウにフォーカスして、印刷プロセスを開始します。システムの印刷ダイアログで、「ファイルに出力」オプションを選択します。

このメソッドは、PDF として保存するときに要素の外観が忠実にレンダリングされるようにすることで、CSS スタイルを効果的に保持します。このアプローチを示す JavaScript スニペットは次のとおりです。

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // `styles`: `style` element; 
  // or `String` "<style>.light{color:#0af;}</style>" ;
  // alternatively , add `style` attribute to `pre` element directly,
  // e.g., `<pre style="color:#0af;">`
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  // append `text`:`pre` element `styles`:`style` element
  // at `popup` `document.body`
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

このアプローチを採用すると、CSS スタイル設定を通じて視覚的な美しさを維持しながら、HTML 要素を PDF として効率的に保存できます。

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