Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法

LODOP.PRINT_INIT("打印任務(wù)名");    //首先一個初始化語句 
LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本內(nèi)容一");//然后多個ADD語句及SET語句 
LODOP.PRINT();        //最后一個打印(或預(yù)覽、維護(hù)、設(shè)計)語句

// 改造LodopFuncs.js
//====判斷是否需要安裝CLodop云打印服務(wù)器:====
export function needCLodop(){ ...... }

//====獲取LODOP對象的主過程：====
export function getLodop(oOBJECT,oEMBED){ ...... }

// doPrint.js
import { getLodop } from '@/utils/LodopFuncs'

/**
 * 打印方法doPrint
 * @param {*} printConfig 任務(wù)名,上邊距,左邊距,寬度,高度,打印html內(nèi)容,是否橫屏,分頁
 */
export default function({ name, top, left, width, height, htmlContent, isHorizontal }) {
 const LODOP = getLodop()
 LODOP.PRINT_INIT('訂貨單') // 打印初始化(打印任務(wù)名)
 LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')
 LODOP.SET_PRINT_STYLE('FontSize', 18) // 樣式
 LODOP.SET_PRINT_STYLE('Bold', 1)
 // LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, '打印頁面部分內(nèi)容') // 添加純文本內(nèi)容
 // top,left,width,height,htmlContent
 LODOP.ADD_PRINT_HTM(88, 75, 650, 978, htmlContent) // 添加HTML模板內(nèi)容
 // LODOP.PRINT(); // 直接打印
 LODOP.PREVIEW() // 預(yù)覽
}

// use.js
import doPrint from '@/utils/doPrint'

Vue.prototype.$doPrint = doPrint
在vue頁面中使用
 this.$doPrint(data)
 /**
 * 注意: 這里因為用到了這個插件,所以有可能需要讓這個插件內(nèi)部方法在加載完成后才能正常使用
 * 也就是說,它還有以一些準(zhǔn)備工作,例如判斷方法,連接通訊等等
 * 如果直接用會報錯的話,或者崩潰等其他問題,所以就可以在這里延遲再執(zhí)行打印操作
 * setTimeout(()=> {
 * this.$doPrint(data)
 * })
 * */