適用於vue項目的打印插件


此方法只適用於現代瀏覽器,IE10以下就別用了

// 使用時請盡量在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()
        }
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM