適用於vue項目的打印插件(轉載)
阿新 • • 發佈:2019-01-21
refs dialog nts append eno 項目 width 完成 sar
出處:https://www.cnblogs.com/lvyueyang/p/9847813.html
// 使用時請盡量在nickTick中調用此方法 //打印 export default (refs, cb) => { let cloneN if (Array.isArray(refs)) { cloneN = refs[0].cloneNode(true) } else { cloneN = refs.cloneNode(true) } const body = document.getElementsByTagName(‘body‘)[0] cloneN.style.position= ‘absolute‘ cloneN.style.zIndex = ‘9999999999‘ cloneN.style.top = 0 cloneN.style.left = 0 cloneN.style.width = ‘100%‘ cloneN.style.minHeight = ‘100%‘ cloneN.style.background = ‘#fff‘ body.appendChild(cloneN) // 配置樣式 const bt = body.style.cssText body.style.overflowY= ‘auto‘ body.style.cloneN = ‘auto‘ const eld = document.querySelector(‘.el-dialog__wrapper‘) const dc = eld.style.cssText eld.style.display = ‘none‘ // 圖片全部加載完成後再開始打印 let imgs = cloneN.getElementsByTagName(‘img‘) let len = imgs.length let ni = 0 const print = () => { ni+= 1 if (ni === len) { // 開始打印 window.print() // 還原樣式 body.style = bt eld.style = dc // 移除節點 body.removeChild(cloneN) // 回調 if (cb) { cb() } } } for (let i of imgs) { i.onload = () => { print() } i.onerror = () => { print() } } }
適用於vue項目的打印插件(轉載)