在 Angular 2 中打印 Html 模板(Angular 2 中的 ng-print)

2023-11-22

我想在 Angular 2 中打印 HTML 模板。我已经对此进行了探索,我在 AngularJS 1 中得到了解决方案在 Angularjs 中打印 Html 模板 1

任何建议将不胜感激


这就是我在 angular2 中所做的(它类似于笨拙的解决方案)在您的 HTML 文件中:

<div id="print-section">
  // your html stuff that you want to print
</div>
<button (click)="print()">print</button>

在你的 TS 文件中:

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

UPDATE:

您还可以缩短路径并仅使用ngx打印库可减少不一致的编码(混合 JS 和 TS)以及更多开箱即用的可控且安全的打印案例。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 2 中打印 Html 模板(Angular 2 中的 ng-print) 的相关文章

随机推荐

  • 任意分隔符/转义字符处理的最佳算法是什么?

    令我有点惊讶的是 网上没有任何关于此问题的信息 而且我不断发现这个问题比我想象的要棘手一些 规则如下 您从分隔 转义数据开始将其拆分为数组 分隔符是一个任意字符 转义字符是任意一个字符 分隔符和转义字符都可以出现在数据中 正则表达式很好 但
  • 组织Android SDK的代码文件/XML文件

    有人可以提供一些组织我的项目以使其干净的策略吗 假设我有很多活动 将它们全部放入一个单独的包中 同时将其他类 例如自定义适配器 放入另一个包中以更好地分离 逻辑 是否很好 另外 在为布局创建 XML 文件时 如果我有一些用于某些活动的布局和
  • 修复 CSS 流体网格中的子像素舍入问题

    我正在尝试创建一个流畅的 CSS 网格 它适用于 Firefox 和 IE8 但不适用于 Safari Chrome Opera 其中子像素舍入问题变得可见 http jsfiddle net bJKQ6 2 column float le
  • 为什么 BinaryReader.ReadUInt32() 会反转位模式?

    我正在尝试使用 BinaryReader 类读取二进制文件 并且我需要将其作为 UInt32 块读取 然后进行一些位移等操作 但是 由于某种原因 当我使用 ReadUInt32 方法时 位顺序会颠倒 例如 如果我有一个文件 其中前四个字节的
  • 传递配置参数以在 R 中安装包

    我正在尝试安装一个包R来自 CRAN 存储库 我必须在配置阶段 但我不知道如何做到这一点install packages gt install packages Rmpfr checking mpfr h usability no chec
  • 在 Vue.js 中,如何查找哪些数据更改导致组件重新渲染?

    在 Vue js 中 当某些数据发生变化时 组件会重新渲染 更新 有时重新渲染频率太频繁 我想找出哪些数据的更改导致了此重新渲染 如何找出导致重新渲染的更改数据 Using 深度差异和一个简单的观察程序 您可以轻松找到虚拟机数据的先前副本之
  • 为什么“tail”不能截断日志文件?

    我正在尝试使用 cron 脚本管理日志文件大小 我基本上想每晚删除日志文件中除最后 2000 行之外的所有内容 我正在尝试运行此命令 但它似乎正在清空整个文件而不是执行我想要的操作 tail 2000 日志文件 txt gt 日志文件 tx
  • CakePHP 数据库表,缺少默认数据源

    I found this类似的问题 但我的问题不同 我将 CakePHP 2 2 应用程序移至另一台服务器 迁移前不存在任何问题 迁移后大多数事情都运行良好 我可以访问我的大部分数据库表等 但是当我尝试访问我的其中一个表时 我收到此错误 E
  • 将 Sqlite BigInt 转换为日期

    我有一个 Sqlite 数据库 用作 Quartz net 调度程序作业的 ado net 作业存储 在一个表中 名为 START TIME 的列的类型为 big int 有没有办法将 bigint 转换或转换为日期值 我希望能够查询数据库
  • JSON - 无法使用 Jackson 序列化对象内的 JSONObject

    我有以下课程 class A String abc String def appropriate getters and setters with JsonProperty Annotation 我打电话给Jacksons objectMa
  • 如何防止未启用的 EditText 出现键盘

    我的活动有一个EditText据称 在用户单击屏幕的编辑按钮之前 该内容是不可编辑的 I did edit setEnabled false 但仍然会为用户显示一个键盘 并且可以将值添加到EditText通过键盘在屏幕上显示 即使屏幕可能看
  • json -c json_object_to_json_string 释放内存时

    我正在使用 json c 库将 json object 发送到客户端 我注意到没有本机函数来释放 json object to json string 分配的内存 该库会自动释放它吗 或者我必须 free str 以避免内存泄漏 我试图阅读
  • 服务定位器、依赖注入(和容器)和控制反转

    我已经编程有一段时间了 但从来没有兴趣从理论上了解每个概念的含义 我可能正在使用各种编程概念 但我并不知道 服务定位器 对我来说 指的是通过减少代码量来加快开发速度的捷径记录 一个问题是 定位器可以仅引用名称空间 类 或者我可以拥有变量注册
  • 从 Enum 中的类初始化一个新对象

    我有一个名为 Plugins 的枚举 public enum Plugins ROTATING LINE plugin rotatingline RotatingLine class SNOW SYSTEM plugin snow Snow
  • Selenium 仅在使用无头 Chrome 时无法定位元素(Python)

    我刚刚开始学习 Selenium 需要使用云中的 jenkins 机器验证登录网页 该机器没有 GUI 我设法在具有 UI 的系统上成功运行该脚本 然而 当我修改脚本以无头运行时 它失败说无法定位元素 我的脚本如下 usr bin env
  • 如何在 Thymeleaf 中执行 if-else 操作?

    做一个简单的最好方法是什么if else在百里香叶 我想在 Thymeleaf 中实现相同的效果
  • Apache ProxyPass 和会话

    因此 我使用 Apache 将特定文件夹代理到 Glassfish 实例 我的conf中的规则是 ProxyPass folder http localhost 28083 ProxyPassReverse folder http loca
  • Windows 禁止文件和文件夹名称的完整列表

    在 Windows 上 禁止使用 com1 txt 或 lpt1 txt 等文件名 是否有 Windows 上所有禁止的文件和文件夹名称的列表 或文件和文件夹名称中的禁止字符 例如 无效字符列表为 gt 大于 冒号 双引号 正斜杠 反斜杠
  • 如何重写WebServiceHostFactory MaxReceivedMessageSize?

    那里有很多类似的问题 但我已经尝试了每个问题中的每一种解决方案都无济于事 我们有一个使用 WebServiceHostFactory 初始化的 Web 服务 但如果向其抛出超过 64k 的数据 我们会收到 400 错误请求 通常 只需增加
  • 在 Angular 2 中打印 Html 模板(Angular 2 中的 ng-print)

    我想在 Angular 2 中打印 HTML 模板 我已经对此进行了探索 我在 AngularJS 1 中得到了解决方案在 Angularjs 中打印 Html 模板 1 任何建议将不胜感激 这就是我在 angular2 中所做的 它类似于