window.print()前端实现打印功能

最新推荐文章于 2024-09-13 11:55:50 发布

清晨-阳光zx

最新推荐文章于 2024-09-13 11:55:50 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： html css javascript

本文链接：https://blog.csdn.net/pro_fan/article/details/109676464

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

方法介绍

window.print()方法用于打印当前窗口的内容。
默认打印页面中body里的所有内容。
调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印配置。

1. 打印方法

1.1 打印当前窗口内容

示例demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>window.print()打印测试</title>
</head>
<script>
  function doPrint() {
    window.print()
  }
</script>
<body>
<button onclick="doPrint()">打印</button>
<div style="width: 300px; height: 100px; border: 1px solid black">
  打印内容区域
</div>
</body>
</html>

打印demo示例效果图

1.2 打印指定区域内容

1.2.1 方式1：截取当前页面需要打印的内容

示例demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>window.print()打印测试</title>
</head>
<script>
  function printpage() {
    let oldStr = window.document.body.innerHTML; // 获取body的内容
    let start = "<!--startprint-->"; // 开始打印标识, 17个字符
    let end = "<!--endprint-->"; // 结束打印标识
    let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
    newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
    window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
    window.print(); // 调用浏览器的打印功能打印指定区域
    window.document.body.innerHTML = oldStr; // body替换为原来的内容
  }
</script>
<body>
	<input type="button" value="打印此页面" onclick="printpage()"/>
	<!--startprint-->
	<div id="printContent">打印内容</div>
	<!--endprint-->
</body>
</html>

在这里插入图片描述

注：该种方式会修改当前窗口的显示内容，比如上述示例代码中的打印按钮，显示打印预览窗口时，浏览器页面上打印按钮会消失。

1.2.2 方式2：打印页面指定的元素区域内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>window.print()打印测试</title>
</head>
<script>
    function printpage() {
      let newstr = document.getElementById("printContent").innerHTML;
      let oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
    }
  </script>
<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
  <div id="printContent" style="width: 300px; height: 100px; border: 1px solid black">
  打印内容区域
  </div>
</body>
</html>

注：该种方式，也会修改当前窗口的内容。

上述两种打印方法会将页面的元素内容改变，在项目中，有时不允许修改当前窗口的内容，可以使用window.open()方法打开一个新的浏览器窗口。

2. 打印样式

<style type="text/css" media="print">
   // 打印样式
</style>

3. 去除浏览器默认页眉页脚

<style type="text/css" media="print">
  @media print {
    @page {
      margin: 0;
    }
    body {
      margin: 1cm; // 此处样式根据实际需要进行设置
    }
  }
</style>