前端打印功能

最新推荐文章于 2024-07-10 09:41:19 发布

少年是只猫

最新推荐文章于 2024-07-10 09:41:19 发布

阅读量392

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_41128253/article/details/103027771

版权

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

摘要由CSDN通过智能技术生成

前端打印功能

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