先看打印的效果
網(wǎng)上找到的實(shí)現(xiàn)如下:
?doPrint ()?{
??????//?獲取當(dāng)前頁(yè)的html代碼
??????var?bdhtml?=?window.document.body.innerHTML
??????//?設(shè)置打印開(kāi)始區(qū)域
?????var?startStr?= '<!--start-->'
??????//?設(shè)置打印結(jié)束區(qū)域
??????var?endStr?= '<!--end-->'
??????//?從標(biāo)記里獲取需要打印的頁(yè)面
??????var?printHtml?=?bdhtml.substring(bdhtml.indexOf(startStr)?+?startStr.length,?bdhtml.indexOf(endStr))
// 也可以通過(guò)id獲取
// var printHtml?= document.getElementById('printid').innerHTML
??????//?需要打印的頁(yè)面
??????window.document.body.innerHTML?=?printHtml
??????window.print()
??????//?還原界面
??????window.document.body.innerHTML?=?bdhtml
??????window.location.reload()
????}
【遇到問(wèn)題】目前做的項(xiàng)目是用的ReactJs實(shí)現(xiàn)的豪椿,bdhtml.indexOf(startStr)? 為-1叼耙,也即獲取不到注釋的字符串內(nèi)容偷仿,故需要通過(guò)獲取id實(shí)現(xiàn),具體代碼:
在要打印的區(qū)域?qū)憆ef通過(guò)id獲取具體的DOM:
打印按鈕:
具體打印函數(shù):