Vue 项目中使用Lodop进行打印

配置文件与地址

Lodop

• 插件下载、打印设计都在这个网址上面进行，过程不做过多赘述，相信大家在看文章前应该对Lodop有了一定的了解

Vue中引入Lodop所需的配置文件

• 建议在项目中建一个自己的工具方法文件夹，使用方便

• 相信大家在截图中已经看到了，有个lodop.js的文件，没错！核心的一大坨都在里面，这里直接上代码

var CreatedOKLodop7766 = null

export function needCLodop() {
    try {
        var ua = navigator.userAgent
        if (ua.match(/Windows\sPhone/i) != null) return true
        if (ua.match(/iPhone|iPod/i) != null) return true
        if (ua.match(/Android/i) != null) return true
        if (ua.match(/Edge\D?\d+/i) != null) return true

        var verTrident = ua.match(/Trident\D?\d+/i)
        var verIE = ua.match(/MSIE\D?\d+/i)
        var verOPR = ua.match(/OPR\D?\d+/i)
        var verFF = ua.match(/Firefox\D?\d+/i)
        var x64 = ua.match(/x64/i)
        if (verTrident == null && verIE == null && x64 !== null) return true
        else if (verFF !== null) {
            verFF = verFF[0].match(/\d+/)
            if (verFF[0] >= 41 || x64 !== null) return true
        } else if (verOPR !== null) {
            verOPR = verOPR[0].match(/\d+/)
            if (verOPR[0] >= 32) return true
        } else if (verTrident == null && verIE == null) {
            var verChrome = ua.match(/Chrome\D?\d+/i)
            if (verChrome !== null) {
                verChrome = verChrome[0].match(/\d+/)
                if (verChrome[0] >= 41) return true
            }
        }
        return false
    } catch (err) {
        return true
    }
}

//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
    var head =
        document.head ||
        document.getElementsByTagName('head')[0] ||
        document.documentElement
    var oscript = document.createElement('script')
    oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
    head.insertBefore(oscript, head.firstChild)

    //引用双端口(8000和18000）避免其中某个被占用：
    oscript = document.createElement('script')
    oscript.src = 'http://local