// 打印方法
print() {
// 需要打印的局部区域赋予"print-wrap"的id
let el = document.getElementById("print-wrap")
let doc = document
let body = doc.body || doc.getElementsByTagName("body")[0]
let printId = "print-" + Date.now()
// 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
let content = doc.createElement("div")
content.id = printId
// 样式控制与打印无关的元素隐藏
let style = doc.createElement("style")
style.innerHTML =
"body>
printId +
"{display:none}@media print{body>:not(
printId +
"){display:none !important}body>
printId +
"{display:block
content.innerHTML = el.outerHTML
// console.log("el.outerHTML", el.outerHTML)
body.appendChild(style)
// 与style元素设置的样式相配合
// 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式)
body.appendChild(content)
setTimeout(() => {
window.print()
body.removeChild(content)
body.removeChild(style)
}, 20)
},
如果是在react组件中可以使用ref代替使用id获取到该DOM信息的方法
转载自CSDN RumbleWx 原文章地址http://t.csdnimg.cn/wmpFj