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

更新時(shí)間：2019年12月19日 11:40:41 作者：ChiFung

這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

介紹

需要進(jìn)行打印功能,Lodop就是實(shí)現(xiàn)需求的插件.就是引入對(duì)應(yīng)的js-sdk,使用js調(diào)用對(duì)應(yīng)的打印方法,然后就會(huì)調(diào)出客戶端軟件(需要用戶安裝),然后就可以在軟件里面打印內(nèi)容了.

使用方法

最小實(shí)現(xiàn)

實(shí)現(xiàn)打印必須要執(zhí)行的3個(gè)最基本的方法

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

所有方法

PRINT_INIT(strPrintTaskName)打印初始化
SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)設(shè)定紙張大小 (1橫向2豎向,寬度,高度,頁(yè)面大小名稱(chēng)寬高都設(shè)置為0的時(shí)候才可以設(shè)置"A5","A4")
ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本項(xiàng)
ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加純文本項(xiàng)
ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格項(xiàng)(strHtml為html模板字符串)
ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)畫(huà)圖形
SET_PRINT_STYLE(strStyleName, varStyleValue)設(shè)置對(duì)象風(fēng)格
PREVIEW打印預(yù)覽
PRINT直接打印
PRINT_SETUP打印維護(hù)
PRINT_DESIGN打印設(shè)計(jì)

在Vue中使用Lodop

下載lodop,把js文件放到utils里面,把里面兩個(gè)方法修改為export function(暴露出去,讓其他js文件import來(lái)用)

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

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

寫(xiě)好打印方法的邏輯

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

/**
 * 打印方法doPrint
 * @param {*} printConfig 任務(wù)名,上邊距,左邊距,寬度,高度,打印html內(nèi)容,是否橫屏,分頁(yè)
 */
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, '打印頁(yè)面部分內(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里面把打印方法掛載到全局方法

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

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: