如何在 Pre 元素的 PDF 匯出中保留 CSS 樣式？

在Pre 元素的PDF 匯出中保留CSS 樣式

在語法螢光筆提供將突出顯示的程式碼儲存為PDF 的選項的情況下，保留CSS 樣式對於保留突出顯示程式碼的美觀和功能性至關重要。

使用CSS 將Pre 元素儲存為PDF

要將預元素另存為PDF，同時保留其CSS 樣式，請考慮以下方法:

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>

實作注意事項

• 確保 styles 變數包含與 pre 元素相關的樣式元素或內聯樣式資訊。
• 根據需要調整CSS 媒體查詢以確保最佳格式

結論

透過實施這些技術，您可以有效地將pre 元素保存為PDF，同時保留其CSS 樣式，從而使用戶可以輕鬆共享和存檔突出顯示的程式碼準確的呈現。

以上是如何在 Pre 元素的 PDF 匯出中保留 CSS 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！