打印指定 DOM 节点
使用时直接调用此函数,最后几行图片相关代码根据实际需求修改
/**
* @param {Element} dom 节点
* @param {String} title 标题
* @param {String} specialStyle CSS选择器,打印保留样式
*/
function printPartial(dom, title = document.title, specialStyle = '') {
if (!dom) return
let copyDom = document.createElement('span')
const styleDom = document.querySelectorAll('style')
const titleDom = document.createElement('title')
titleDom.innerText = title
copyDom.appendChild(titleDom)
Array.from(styleDom).forEach((item) => {
if (
item.childNodes.length > 0 &&
item.childNodes[0].nodeValue.indexOf(specialStyle) !== -1
) {
copyDom.appendChild(item.cloneNode(true))
}
})
copyDom.appendChild(dom.cloneNode(true))
const htmlTemp = copyDom.innerHTML
copyDom = null
const iframeDom = document.createElement('iframe')
// 隐藏 iframe
const attrObj = {
height: 0,
width: 0,
border: 0,
wmode: 'Opaque'
}
const styleObj = {
display: 'none'
}
Object.entries(attrObj).forEach(([key, value]) =>
iframeDom.setAttribute(key, value)
)
Object.entries(styleObj).forEach(([key, value]) => {
iframeDom.style[key] = value
})
document.body.insertBefore(iframeDom, document.body.children[0])
const iframeWin = iframeDom.contentWindow
const iframeDocs = iframeWin.document
iframeDocs.body.innerHTML = htmlTemp
// 多页打印
iframeDocs
.getElementsByTagName('body')[0]
.setAttribute('style', 'overflow: visible!important; margin: 0')
// 如有图片需等待图片加载完成
const img = iframeDocs.body.getElementsByClassName('img')[0]
if (img) {
img.onload = function () {
iframeWin.focus()
iframeWin.print()
}
} else {
iframeWin.focus()
iframeWin.print()
}
}