Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法
介紹
需要進(jìn)行打印功能,Lodop就是實(shí)現(xiàn)需求的插件.就是引入對應(yīng)的js-sdk,使用js調(diào)用對應(yīng)的打印方法,然后就會調(diào)出客戶端軟件(需要用戶安裝),然后就可以在軟件里面打印內(nèi)容了.
使用方法
最小實(shí)現(xiàn)
實(shí)現(xiàn)打印必須要執(zhí)行的3個最基本的方法
LODOP.PRINT_INIT("打印任務(wù)名"); //首先一個初始化語句 LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本內(nèi)容一");//然后多個ADD語句及SET語句 LODOP.PRINT(); //最后一個打印(或預(yù)覽、維護(hù)、設(shè)計(jì))語句
所有方法
- PRINT_INIT(strPrintTaskName)打印初始化
- SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)設(shè)定紙張大小 (1橫向2豎向,寬度,高度,頁面大小名稱寬高都設(shè)置為0的時候才可以設(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)畫圖形
- SET_PRINT_STYLE(strStyleName, varStyleValue)設(shè)置對象風(fēng)格
- PREVIEW打印預(yù)覽
- PRINT直接打印
- PRINT_SETUP打印維護(hù)
- PRINT_DESIGN打印設(shè)計(jì)
在Vue中使用Lodop
下載lodop,把js文件放到utils里面,把里面兩個方法修改為export function(暴露出去,讓其他js文件import來用)
// 改造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里面把打印方法掛載到全局方法
// use.js import doPrint from '@/utils/doPrint' Vue.prototype.$doPrint = doPrint 在vue頁面中使用 this.$doPrint(data) /** * 注意: 這里因?yàn)橛玫搅诉@個插件,所以有可能需要讓這個插件內(nèi)部方法在加載完成后才能正常使用 * 也就是說,它還有以一些準(zhǔn)備工作,例如判斷方法,連接通訊等等 * 如果直接用會報錯的話,或者崩潰等其他問題,所以就可以在這里延遲再執(zhí)行打印操作 * setTimeout(()=> { * this.$doPrint(data) * }) * */
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
Vue詳細(xì)講解Vuex狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08vue2中組件互相調(diào)用實(shí)例methods中的方法實(shí)現(xiàn)詳解
vue在同一個組件內(nèi),方法之間經(jīng)常需要互相調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue2中組件互相調(diào)用實(shí)例methods中的方法實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡動態(tài)更改css樣式的方法
這篇文章主要介紹了vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡-動態(tài)更改css樣式的方法,代碼分為html和js兩部分,需要的朋友可以參考下2018-05-05