如何在 Pre 元素的 PDF 导出中保留 CSS 样式？

在 Pre 元素的 PDF 导出中保留 CSS 样式

在语法荧光笔提供将突出显示的代码保存为 PDF 的选项的情况下，保留 CSS 样式对于保留突出显示代码的美观性和功能性至关重要。

使用 CSS 将 Pre 元素另存为 PDF

要将预元素另存为 PDF，同时保留其 CSS 样式，请考虑以下方法:

1. 创建一个新窗口：打开一个新的浏览器窗口。
2. 附加 HTML 和样式：插入预定义的 HTML元素，包括任何相关样式，添加到新窗口的文档正文中。
3. 聚焦并打印：聚焦于新窗口并启动打印过程。
4. 系统打印对话框：在系统打印对话框中，选择“打印到文件”选项，将突出显示的代码保存为 PDF。

代码示例

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // retrieve and append `style` element, or define inline styling
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

实现注意事项

• 确保 styles 变量包含与 pre 元素相关的样式元素或内联样式信息。
• 根据需要调整 CSS 媒体查询以确保最佳格式

结论

通过实施这些技术，您可以有效地将 pre 元素保存为 PDF，同时保留其 CSS 样式，从而使用户可以轻松共享和存档突出显示的代码准确的呈现。

以上是如何在 Pre 元素的 PDF 导出中保留 CSS 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！