Vue 項目中使用Lodop進行打印

時間 2019-12-12

標籤 vue 項目使用 lodop 進行打印简体版

原文原文鏈接

配置文件與地址

Lodophtml

插件下載、打印設計都在這個網址上面進行，過程不作過多贅述，相信你們在看文章前應該對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://localhost:18000/CLodopfuncs.js?priority=0'
    head.insertBefore(oscript, head.firstChild)
}

//====獲取LODOP對象的主過程：====
export function getLodop(oOBJECT, oEMBED) {
    var strHtmInstall =
        "<br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='install_lodop32.exe' target='_self'>執行安裝</a>,安裝後請刷新頁面或從新進入。</font>"
    var strHtmUpdate =
        "<br><font color='#FF00FF'>打印控件須要升級!點擊這裏<a href='install_lodop32.exe' target='_self'>執行升級</a>,升級後請從新進入。</font>"
    var strHtm64_Install =
        "<br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='install_lodop64.exe' target='_self'>執行安裝</a>,安裝後請刷新頁面或從新進入。</font>"
    var strHtm64_Update =
        "<br><font color='#FF00FF'>打印控件須要升級!點擊這裏<a href='install_lodop64.exe' target='_self'>執行升級</a>,升級後請從新進入。</font>"
    var strHtmFireFox =
        "<br><br><font color='#FF00FF'>（注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加組件】->【擴展】中先卸它）</font>"
    var strHtmChrome =
        "<br><br><font color='#FF00FF'>(若是此前正常，僅因瀏覽器升級或重安裝而出問題，需從新執行以上安裝）</font>"
    var strCLodopInstall =
        "<br><font color='#FF00FF'>CLodop雲打印服務(localhost本地)未安裝啓動!點擊這裏<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>執行安裝</a>,安裝後請刷新頁面。</font>"
    var strCLodopUpdate =
        "<br><font color='#FF00FF'>CLodop雲打印服務需升級!點擊這裏<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>執行升級</a>,升級後請刷新頁面。</font>"
    var LODOP
    try {
        var isIE =
            navigator.userAgent.indexOf('MSIE') >= 0 ||
            navigator.userAgent.indexOf('Trident') >= 0
        if (needCLodop()) {
            try {
                LODOP = getCLodop()
            } catch (err) {}
            if (!LODOP && document.readyState !== 'complete') {
                alert('C-Lodop沒準備好，請稍後再試！')
                return
            }
            if (!LODOP) {
                if (isIE) document.write(strCLodopInstall)
                else
                    document.body.innerHTML =
                        strCLodopInstall + document.body.innerHTML
                return
            } else {
                if (CLODOP.CVERSION < '3.0.4.3') {
                    if (isIE) document.write(strCLodopUpdate)
                    else
                        document.body.innerHTML =
                            strCLodopUpdate + document.body.innerHTML
                }
                if (oEMBED && oEMBED.parentNode)
                    oEMBED.parentNode.removeChild(oEMBED)
                if (oOBJECT && oOBJECT.parentNode)
                    oOBJECT.parentNode.removeChild(oOBJECT)
            }
        } else {
            var is64IE = isIE && navigator.userAgent.indexOf('x64') >= 0
            //=====若是頁面有Lodop就直接使用，沒有則新建:==========
            if (oOBJECT != undefined || oEMBED != undefined) {
                if (isIE) LODOP = oOBJECT
                else LODOP = oEMBED
            } else if (CreatedOKLodop7766 == null) {
                LODOP = document.createElement('object')
                LODOP.setAttribute('width', 0)
                LODOP.setAttribute('height', 0)
                LODOP.setAttribute(
                    'style',
                    'position:absolute;left:0px;top:-100px;width:0px;height:0px;',
                )
                if (isIE)
                    LODOP.setAttribute(
                        'classid',
                        'clsid:2105C259-1E0C-4534-8141-A753534CB4CA',
                    )
                else LODOP.setAttribute('type', 'application/x-print-lodop')
                document.documentElement.appendChild(LODOP)
                CreatedOKLodop7766 = LODOP
            } else LODOP = CreatedOKLodop7766
            //=====Lodop插件未安裝時提示下載地址:==========
            if (LODOP == null || typeof LODOP.VERSION == 'undefined') {
                if (navigator.userAgent.indexOf('Chrome') >= 0)
                    document.body.innerHTML =
                        strHtmChrome + document.body.innerHTML
                if (navigator.userAgent.indexOf('Firefox') >= 0)
                    document.body.innerHTML =
                        strHtmFireFox + document.body.innerHTML
                if (is64IE) document.write(strHtm64_Install)
                else if (isIE) document.write(strHtmInstall)
                else
                    document.body.innerHTML =
                        strHtmInstall + document.body.innerHTML
                return LODOP
            }
        }
        if (LODOP.VERSION < '6.2.2.3') {
            if (!needCLodop()) {
                if (is64IE) document.write(strHtm64_Update)
                else if (isIE) document.write(strHtmUpdate)
                else
                    document.body.innerHTML =
                        strHtmUpdate + document.body.innerHTML
            }
            return LODOP
        }
        //===以下空白位置適合調用統一功能(如註冊語句、語言選擇等):===

        //===========================================================
        return LODOP
    } catch (err) {
        alert('getLodop出錯:' + err)
    }
}

緊接着在上面的截圖有個doPrint.js文件，裏面存放的就是你要打印的東西

import { getLodop } from '@t/lodop' //這塊就是引用的上面一大坨暴露出來的方法嘍

const PrintAccount = (qrTitle, codetype, url, code) => {
    let qrAccount = `${url}/#/?type=${codetype}&code=${code}`
    // 調用打印對象
    LODOP = getLodop()
    // 打印頁面配置
    LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
    LODOP.SET_PRINT_PAGESIZE(3, '5.7cm', '2cm', 2)

    // 條碼內容
    LODOP.ADD_PRINT_TEXT(3, 32, 127, 20, qrTitle)
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 15)
    LODOP.ADD_PRINT_BARCODE(26, 15, 170, 147, 'QRCode', qrAccount)
    // LODOP.ADD_PRINT_TEXT(159, 11, 163, 42, qrAccount)
    // LODOP.SET_PRINT_STYLEA(0, 'FontSize', 11)
}

export { PrintAccount }

打印設計

首先進入打印設計頁面

進入下面這個設計頁面固然是你在打開官網插件以後操做的

這裏面能夠把你設計的圖形界面生成代碼，也就是上面第二段代碼

頁面開始打印

準備好上面的操做，整個過程你已經完成了90%
接下來就是調用了，封裝好的公共樣式的doPrint.js文件就是你要調用的

import { PrintAccount } from '@t/doPrint'
import { getLodop } from '@t/lodop'

批量打印、或者單個打印

<div class="selectBtn">
   <el-button class="form_button" type="primary" @click="multipPrint" icon="el-icon-printer">批量打印</el-button>
   <el-button class="form_button" type="primary" @click="singlePrint" icon="el-icon-printer">單個打印</el-button>
</div>

// 多選打印
        multipPrint() {
            if (this.multipkeSelect.length <= 1) {
                this.$notify({
                    title: '警告',
                    message: '請至少選擇兩項進行打印',
                    type: 'warning',
                })
                return
            }
            for (let i = 0; i < this.multipkeSelect.length; i++) {
                PrintAccount(
                    '商品包裝碼',
                    '3',
                    Connect.codeUrl,
                    this.multipkeSelect[i].packingCode,
                )
                LODOP.PRINT()
                // LODOP.PREVIEW()
            }
        },
        singlePrint() {
            if (this.multipkeSelect.length != 1) {
                this.$notify({
                    title: '警告',
                    message: '請選擇且僅選擇一項進行打印',
                    type: 'warning',
                })
                return
            }
            PrintAccount(
                '商品包裝碼',
                '3',
                Connect.codeUrl,
                this.multipkeSelect[0].packingCode,
            )
            LODOP.PRINT()
            // LODOP.PREVIEW()
        },