将语法荧光笔预元素保存为 PDF 时如何保留 CSS 样式？

如何将语法荧光笔预元素另存为 PDF 保留 CSS 样式

将语法荧光笔预元素另存为 PDF，同时维护 CSS，请考虑以下替代方法：

解决方案：

1. 创建新窗口： 使用 window 打开新浏览器窗口.open().
2. 附加 HTML 和 CSS: 附加 pre 元素 ($("#output")[0].outerHTML) 的 HTML 内容和任何必要的 CSS 样式 ( $("style")[0].outerHTML) 到新窗口的主体。
3. 聚焦和打印： 在新窗口上调用 .focus() 和 .print() 。这将触发系统打印对话框，允许您选择“打印到文件”将预元素保存为 PDF。

jQuery 实现：

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

演示：

您可以在以下 jsfiddle 中看到此解决方案的实际效果：http://jsfiddle.net/tn04Ldka/2/

以上是将语法荧光笔预元素保存为 PDF 时如何保留 CSS 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！