介紹
10余年的臨翔網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整臨翔建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“臨翔網(wǎng)站設計”,“臨翔網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
需要進行打印功能,Lodop就是實現(xiàn)需求的插件.就是引入對應的js-sdk,使用js調用對應的打印方法,然后就會調出客戶端軟件(需要用戶安裝),然后就可以在軟件里面打印內容了.
使用方法
最小實現(xiàn)
實現(xiàn)打印必須要執(zhí)行的3個最基本的方法
重慶分公司
重慶分公司
LODOP.PRINT_INIT("打印任務名"); //首先一個初始化語句
LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本內容一");//然后多個ADD語句及SET語句
LODOP.PRINT(); //最后一個打印(或預覽、維護、設計)語句所有方法
在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內容,是否橫屏,分頁
*/
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, '打印頁面部分內容') // 添加純文本內容
// top,left,width,height,htmlContent
LODOP.ADD_PRINT_HTM(88, 75, 650, 978, htmlContent) // 添加HTML模板內容
// LODOP.PRINT(); // 直接打印
LODOP.PREVIEW() // 預覽
}在use.js里面把打印方法掛載到全局方法
// use.js
import doPrint from '@/utils/doPrint'
Vue.prototype.$doPrint = doPrint
在vue頁面中使用
this.$doPrint(data)
/**
* 注意: 這里因為用到了這個插件,所以有可能需要讓這個插件內部方法在加載完成后才能正常使用
* 也就是說,它還有以一些準備工作,例如判斷方法,連接通訊等等
* 如果直接用會報錯的話,或者崩潰等其他問題,所以就可以在這里延遲再執(zhí)行打印操作
* setTimeout(()=> {
* this.$doPrint(data)
* })
* */總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對創(chuàng)新互聯(lián)的支持。
