使用 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 样式保持其视觉美感。