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

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

使用 CSS 将 Pre 元素保存为 PDF

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

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

代码示例

$("#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();
});

实现注意事项

• 确保 styles 变量包含与 pre 元素相关的样式元素或内联样式信息。
• 调整 CSS 媒体必要时进行查询，以确保 PDF 中的最佳格式。

结论

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