欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

歡迎來到入門教程網(wǎng)!

JavaScript

當前位置:主頁 > 網(wǎng)絡編程 > JavaScript >

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

來源:本站原創(chuàng)|時間:2020-01-10|欄目:JavaScript|點擊: 次

介紹

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

使用方法

最小實現(xiàn)

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

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

所有方法

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

在Vue中使用Lodop

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

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

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

寫好打印方法的邏輯

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

/**
 * 打印方法doPrint
 * @param {*} printConfig 任務名,上邊距,左邊距,寬度,高度,打印html內(nèi)容,是否橫屏,分頁
 */
export default function({ name, top, left, width, height, htmlContent, isHorizontal }) {
 const LODOP = getLodop()
 LODOP.PRINT_INIT('訂貨單') // 打印初始化(打印任務名)
 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() // 預覽
}

在use.js里面把打印方法掛載到全局方法

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對我們的支持。

上一篇:JS獲取當前時間的年月日時分秒及時間的格式化的方法

欄    目:JavaScript

下一篇:js實現(xiàn)上傳圖片并顯示圖片名稱

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

本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9472.html

網(wǎng)頁制作CMS教程網(wǎng)絡編程軟件編程腳本語言數(shù)據(jù)庫服務器

如果侵犯了您的權(quán)利,請與我們聯(lián)系,我們將在24小時內(nèi)進行處理、任何非本站因素導致的法律后果,本站均不負任何責任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有