JavaScript丨打印指定 DOM 节点

JavaScript丨打印指定 DOM 节点

打印指定 DOM 节点

使用时直接调用此函数，最后几行图片相关代码根据实际需求修改

/*** @param {Element} dom 节点* @param {String} title 标题* @param {String} specialStyle CSS选择器，打印保留样式*/
function printPartial(dom, title = document.title, specialStyle = '') {if (!dom) returnlet copyDom = ateElement('span')const styleDom = document.querySelectorAll('style')const titleDom = ateElement('title')titleDom.innerText = titlecopyDom.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.innerHTMLcopyDom = nullconst iframeDom = ateElement('iframe')// 隐藏 iframeconst attrObj = {height: 0,width: 0,border: 0,wmode: 'Opaque'}const styleObj = {display: 'none'}ies(attrObj).forEach(([key, value]) =>iframeDom.setAttribute(key, value))ies(styleObj).forEach(([key, value]) => {iframeDom.style[key] = value})document.body.insertBefore(iframeDom, document.body.children[0])const iframeWin = tWindowconst iframeDocs = iframeWin.documentiframeDocs.body.innerHTML = htmlTemp// 多页打印ElementsByTagName('body')[0].setAttribute('style', 'overflow: visible!important; margin: 0')// 如有图片需等待图片加载完成const img = ElementsByClassName('img')[0]if (img) {load = function () {iframeWin.focus()iframeWin.print()}} else {iframeWin.focus()iframeWin.print()}
}