首页 > 其他 > 详细

适用于vue项目的打印插件(转载)

时间:2019-01-21 20:56:43      阅读:813      评论:0      收藏:0      [点我收藏+]

出处: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项目的打印插件(转载)

原文:https://www.cnblogs.com/520future/p/10300718.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!