将“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中文网其他相关文章！