使用CSS 將HTML 內容儲存為PDF

在Web 開發中，即使將內容匯出為不同格式，保持視覺美觀也至關重要。當嘗試將 HTML 元素儲存為 PDF 時，這可能會帶來挑戰，因為 CSS 樣式可能會在轉換過程中遺失。

對於必須在已儲存的PDF 中保留CSS 的情況，請考慮使用以下方法：

1. 建立新視窗： 開啟新的瀏覽器視窗，專門用於將內容另存為PDF。
2. 附加 HTML 和 CSS：將要保存的元素的 HTML 程式碼附加到新視窗的文檔正文中。此外，還包括元素外觀所需的任何 CSS 樣式。
3. 焦點與列印： 聚焦在新視窗並啟動列印過程。在系統列印對話方塊中，選擇“列印到文件”選項。

此方法透過確保在儲存為 PDF 時忠實呈現元素的外觀，有效保留 CSS 樣式。以下是示範此方法的 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();
});

透過採用此方法，您可以有效地將 HTML 元素儲存為 PDF，同時透過 CSS 樣式保持其視覺美感。