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個(gè)最基本的方法
LODOP.PRINT_INIT("打印任務(wù)名"); //首先一個(gè)初始化語句
LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本內(nèi)容一");//然后多個(gè)ADD語句及SET語句
LODOP.PRINT(); //最后一個(gè)打印(或預(yù)覽、維護(hù)、設(shè)計(jì))語句
所有方法
- PRINT_INIT(strPrintTaskName)打印初始化
- SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)設(shè)定紙張大小 (1橫向2豎向,寬度,高度,頁面大小名稱寬高都設(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)畫圖形
- SET_PRINT_STYLE(strStyleName, varStyleValue)設(shè)置對象風(fēng)格
- PREVIEW打印預(yù)覽
- PRINT直接打印
- PRINT_SETUP打印維護(hù)
- PRINT_DESIGN打印設(shè)計(jì)
在Vue中使用Lodop
下載lodop,把js文件放到utils里面,把里面兩個(gè)方法修改為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)橛玫搅诉@個(gè)插件,所以有可能需要讓這個(gè)插件內(nèi)部方法在加載完成后才能正常使用
* 也就是說,它還有以一些準(zhǔn)備工作,例如判斷方法,連接通訊等等
* 如果直接用會報(bào)錯(cuò)的話,或者崩潰等其他問題,所以就可以在這里延遲再執(zhí)行打印操作
* setTimeout(()=> {
* this.$doPrint(data)
* })
* */
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對我們的支持。
上一篇:JS獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化的方法
欄 目:JavaScript
下一篇:js實(shí)現(xiàn)上傳圖片并顯示圖片名稱
本文標(biāo)題:Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法
本文地址:http://www.jygsgssxh.com/a1/JavaScript/9472.html
您可能感興趣的文章
- 04-02包含javascript舍的詞條
- 04-02javascript匿名,js匿名方法
- 04-02java中間代碼生成器 java自動(dòng)生成代碼工具
- 01-10使用webpack/gulp構(gòu)建TypeScript項(xiàng)目的方法示例
- 01-10使用JS來動(dòng)態(tài)操作css的幾種方法
- 01-10在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
- 01-10echarts實(shí)現(xiàn)折線圖的拖拽效果
- 01-10JS數(shù)據(jù)類型STRING使用實(shí)例解析
- 01-10node使用request請求的方法
- 01-10angularjs模態(tài)框的使用代碼實(shí)例


閱讀排行
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 04-02jquery與jsp,用jquery
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 01-11ajax實(shí)現(xiàn)頁面的局部加載


