前端页面局部打印功能实现
2018-06-14 本文已影响525人
chuweiyan
先看打印的效果


网上找到的实现如下:
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:

打印按钮:

具体打印函数:
