driver.get调用iframe中的页面_JS 调用打印功能

之前碰到前端调用打印机的小众需求，看 npm 上面没有类似的库，所以顺便抽取出了调用打印机的库

livelybone/call-printer​github.com

实现功能：

1. 实现打印机调用
2. 快速自定义打印内容

......

难点：

1. 对应浏览器 API 是什么？如何使用？
2. 确保样式符合预期

---

浏览器核心 API

window

js 调用打印机的两种方式

• 直接调用 window.print()

第一步：获取打印内容。可以使用标记，也可以直接通过 id 或者 class
第二步：将打印内容替换当前页面的 innerHTML
第三步：调用 window.print()

这种方式的缺点在于会操作原始页面的 DOM，影响原始页面的展现，而且当局部打印时样式可能会与预期不一致。

代码示意：

<!--startprint-->

• 使用 iframe（推荐）

将打印内容更新到 iframe 中，然后调用 iframe 的 print API

这种方式不会影响原始页面的展现，但是同样可能会出现样式不一致的问题

---

局部打印时如何确保样式符合预期

局部打印时，打印内容的样式可能会由于全局样式的丢失而失真，有以下方式可以解决：

• 将全局样式文件补充到打印内容中

const 

• 放弃使用 innerHTML获取打印内容的方式，动态计算当前元素的样式，然后对打印内容元素字符串化（stringify）并将样式内联。（call-printer 采用的就是这种方式，并且自动将样式内联了）

计算当前样式：

function 

节点元素 stringify:

function 

---

关于 call-printer 的使用：

import 

---

刘志平 - livelybone

github - 个人组件库 - Demo