前端打印功能

前端实现打印功能

最新推荐文章于 2024-10-12 14:52:51 发布

原创

最新推荐文章于 2024-10-12 14:52:51 发布 · 460 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了前端如何实现打印功能，主要讲解了使用`window.print()`方法的注意事项和可能带来的问题，如影响页面原有状态。为了解决这个问题，推荐使用iframe加载打印内容，并在iframe中调用`window.print()`以避免对主页面的影响。

前端打印功能

window.print()

window.print()可直接打印整个body.innerHTML内容。

window.print()

如果想要打印某个节点，可先把需要打印的节点innerHTML赋值给body.innerHTML，再执行window.print();之后还原页面。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>节点打印</title>
</head>

<body>

<p>11111111111111111</p>
<div class="printBox">
    <h1 style="color: #81D4F9">打印的标题</h1>
    <p>打印的内容</p>
</div