首页 > web前端 > css教程 > 如何将代码块捕获为 PDF,同时在浏览器中保留 CSS 样式?

如何将代码块捕获为 PDF,同时在浏览器中保留 CSS 样式?

Patricia Arquette
发布: 2024-10-23 15:50:02
原创
621 人浏览过

How to Capture a Code Block as PDF while Preserving CSS Styling in a Browser?

使用 CSS 保留将突出显示的 Pre 元素下载为 PDF

要将 pre 元素保存为 PDF,同时保留 CSS 样式,您可以使用方法包括打开一个新窗口,注入 HTML 和 CSS,以及打印到 PDF 文件。

解决方案:

  1. 打开一个新窗口并聚焦
  2. 将 pre 元素的 HTML 和必要的 CSS 样式附加到新窗口的文档正文。
  3. 在新窗口上调用 .focus() 方法。
  4. 调用新窗口上的 .print() 方法。
  5. 在系统打印对话框中,选择“打印到文件”并保存 PDF。

这是您可以使用的 jQuery 代码:

$("#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();
});
登录后复制

以上是如何将代码块捕获为 PDF,同时在浏览器中保留 CSS 样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板