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

在此程式碼中，點擊處理程序擷取「pre」元素的 HTML 內容以及來自 CSS 元素的樣式資訊。建立一個新的彈出窗口，並將組合的 HTML 和 CSS 元素附加到其主體。透過在彈出視窗上呼叫 .focus() 和 .print()，我們觸發系統的列印功能並開啟列印對話方塊。透過選擇“列印到文件”，您可以將輸出儲存為 PDF，並且所有原始 CSS 樣式都完好無損。

以上是將“pre”元素儲存為 PDF 時如何保留 CSS 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！