前端页面局部打印功能实现

先看打印的效果

网上找到的实现如下：

 doPrint () {

      // 获取当前页的html代码

      var bdhtml = window.document.body.innerHTML

      // 设置打印开始区域

     var startStr = '<!--start-->'

      // 设置打印结束区域

      var endStr = '<!--end-->'

      // 从标记里获取需要打印的页面

      var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr))

　　// 也可以通过id获取

　　// var printHtml = document.getElementById('printid').innerHTML

      // 需要打印的页面

      window.document.body.innerHTML = printHtml

      window.print()

      // 还原界面

      window.document.body.innerHTML = bdhtml

      window.location.reload()

    }

【遇到问题】目前做的项目是用的ReactJs实现的，bdhtml.indexOf(startStr)  为-1，也即获取不到注释的字符串内容，故需要通过获取id实现，具体代码：

在要打印的区域写ref通过id获取具体的DOM：

打印按钮：

具体打印函数：