1. 程式人生 > >適用於vue項目的打印插件(轉載)

適用於vue項目的打印插件(轉載)

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項目的打印插件(轉載)