JS实现打印功能，打印后返回原页面

最新推荐文章于 2024-05-22 15:07:14 发布

cbat01

最新推荐文章于 2024-05-22 15:07:14 发布

阅读量3.2k

点赞数 3

分类专栏：前端 JavaScript 文章标签： js打印浏览器打印 JavaScript

本文链接：https://blog.csdn.net/weixin_36270908/article/details/100301384

版权

前端同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

打印功能代码

function printSomething() {
  // 获取当前页面html代码
  var currentHtml = window.document.body.innerHTML
  // 设置打印开始位置
  var start = '<!--startprint-->'
  // 设置打印结束位置
  var end = '<!--endprint-->'
  // 获取到要打印部分的代码
  var printHtml = currentHtml.substring(currentHtml.indexOf(start) + start.length, currentHtml.indexOf(end))
  // 打印
  window.document.body.innerHTML = printHtml
  window.print()
  // 返回原界面
  window.document.body.innerHTML = currentHtml
}

完整例子代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>打印功能</title>
  <style>
    h1{
        text-align: center;
    }
    #main {
        width: 800px;
        height: 200px;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    p {
        text-align: center;
    }
    span {
        display: inline-block;
        width: 100px;
        height: 40px;
        background: #3385FF;
        text-align: center;
        line-height: 40px;
        color: #fff;
        float: right;
        margin-top: 20px;
        margin-right: 320px;
        cursor: pointer;
    }
  </style>
</head>
<body>
  <!--startprint-->
  <div id="main">
    <h1>xx报告</h1>
    <p>打印标题</p>
    <p>打印内容</p>
    <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>
  </div>
  <!--endprint-->
  <span id="printBtn" onclick="printSomething()">打印</span>

  <script>
      
    function printSomething() {
      // 获取当前页面html代码
      var currentHtml = window.document.body.innerHTML
      // 设置打印开始位置
      var start = '<!--startprint-->'
      // 设置打印结束位置
      var end = '<!--endprint-->'
      // 获取到要打印部分的代码
      var printHtml = currentHtml.substring(currentHtml.indexOf(start) + start.length, currentHtml.indexOf(end))

      // 也可以通过id获取
      //var printHtml = document.getElementById('main').innerHTML
      
      // 打印
      window.document.body.innerHTML = printHtml
      window.print()
      // 返回原界面
      window.document.body.innerHTML = currentHtml
    }
  
  </script>
</body>
</html>