vue使用lodop打印控件實現(xiàn)瀏覽器兼容打印的方法
更新時間：2021年02月07日 11:40:55 作者：Allen-沐風
這篇文章主要介紹了vue使用lodop打印控件實現(xiàn)瀏覽器兼容打印的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
前言
此控件直接進行打印底部會有水印，通過官網(wǎng)購買可以解決；
如不想購買，可先執(zhí)行預覽，彈出預覽框進行打印；
需要用到的js文件和api文檔附后，請注意查看。
首先需要在局部或全局引入LodopFuncs.js文件
import {getLodop} from '../../../components/js/LodopFuncs'
方法中調用
print(){
let LODOP = getLodop();
LODOP.PRINT_INITA(0,0,800,1600,"打印庫位名稱");
LODOP.SET_PRINT_PAGESIZE(1,700,500,"") //設定紙張大小
LODOP.NewPage();//初始化
LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true);
LODOP.ADD_PRINT_TEXT('10mm','50mm','30mm','20mm','iphone20Plus');//打印文字
LODOP.SET_PRINT_STYLEA(0,"FontSize",30);//字體樣式
LODOP.ADD_PRINT_LINE('10mm','35mm','40mm','35mm',0,1);//打印直線
LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');//打印二維碼
LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);//二維碼樣式和規(guī)則
LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");//選擇打印機
// LODOP.PRINT_DESIGN()//打開設置
// LODOP.PREVIEW(); //預覽
LODOP.PRINT() //直接打印
},
LodopFuncs.js文件
//==本JS是加載Lodop插件及CLodop服務的綜合示例，可直接使用，建議看懂后融進自己頁面程序==
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
//==判斷是否需要CLodop(那些不支持插件的瀏覽器):==
export function needCLodop() {
try {
var ua = navigator.userAgent;
if (ua.match(/Windows\sPhone/i))
return true;
if (ua.match(/iPhone|iPod|iPad/i))
return true;
if (ua.match(/Android/i))
return true;
if (ua.match(/Edge\D?\d+/i))
return true;
var verTrident = ua.match(/Trident\D?\d+/i);
var verIE = ua.match(/MSIE\D?\d+/i);
var verOPR = ua.match(/OPR\D?\d+/i);
var verFF = ua.match(/Firefox\D?\d+/i);
var x64 = ua.match(/x64/i);
if ((!verTrident) && (!verIE) && (x64))
return true;
else if (verFF) {
verFF = verFF[0].match(/\d+/);
if ((verFF[0] >= 41) || (x64))
return true;
} else if (verOPR) {
verOPR = verOPR[0].match(/\d+/);
if (verOPR[0] >= 32)
return true;
} else if ((!verTrident) && (!verIE)) {
var verChrome = ua.match(/Chrome\D?\d+/i);
if (verChrome) {
verChrome = verChrome[0].match(/\d+/);
if (verChrome[0] >= 41)
return true;
}
}
return false;
} catch (err) {
return true;
}
}
//==引用CLodop的主JS,用雙端口8000和18000(以防其中一個被占):==
if (needCLodop()) {
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var JS1 = document.createElement("script");
JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
head.insertBefore(JS1, head.firstChild);
var JS2 = document.createElement("script");
JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
head.insertBefore(JS2, head.firstChild);
CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
if (JS1.attachEvent) {
CLodopJsState = "loading";
var onChange = function(){
if (window.event.srcElement.readyState == 'loaded')
CLodopJsState = "complete";
};
JS1.attachEvent('onreadystatechange',onChange);
JS2.attachEvent('onreadystatechange',onChange);
}
}
//==獲取LODOP對象主過程,判斷是否安裝、需否升級:==
export function getLodop(oOBJECT, oEMBED) {
var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安裝!點擊這里<a target='_self'>執(zhí)行安裝</a>,安裝后請刷新頁面或重新進入。</font>";
var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升級!點擊這里<a target='_self'>執(zhí)行升級</a>,升級后請重新進入。</font>";
var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安裝!點擊這里<a target='_self'>執(zhí)行安裝</a>,安裝后請刷新頁面或重新進入。</font>";
var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升級!點擊這里<a target='_self'>執(zhí)行升級</a>,升級后請重新進入。</font>";
var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加組件】->【擴展】中先卸它）</font>";
var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，僅因瀏覽器升級或重安裝而出問題，需重新執(zhí)行以上安裝）</font>";
var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服務CLodop未安裝啟動，點擊這里<a target='_self'>下載執(zhí)行安裝</a>";
var strCLodopInstall_2 = "<br>（若此前已安裝過，可<a target='_self'>點這里直接再次啟動</a>）";
var strCLodopInstall_3 = "，成功后請刷新本頁面。</font>";
var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服務CLodop需升級!點擊這里<a target='_self'>執(zhí)行升級</a>,升級后請刷新頁面。</font>";
var LODOP;
try {
var ua = navigator.userAgent;
var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
if (needCLodop()) {
try {
LODOP = getCLodop();
} catch (err) {}
if (!LODOP && (document.readyState !== "complete" || (isIE && CLodopJsState == "loading")) ) {
alert("網(wǎng)頁還沒下載完畢，請稍等一下再操作.");
return;
}
if (!LODOP) {
document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
return;
} else {
if (CLODOP.CVERSION < "3.0.9.3") {
document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
}
if (oEMBED && oEMBED.parentNode)
oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode)
oOBJECT.parentNode.removeChild(oOBJECT);
}
} else {
var is64IE = isIE && !!(ua.match(/x64/i));
//==如果頁面有Lodop就直接使用,否則新建:==
if (oOBJECT || oEMBED) {
if (isIE)
LODOP = oOBJECT;
else
LODOP = oEMBED;
} else if (!CreatedOKLodopObject) {
LODOP = document.createElement("object");
LODOP.setAttribute("width", 0);
LODOP.setAttribute("height", 0);
LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
if (isIE)
LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
else
LODOP.setAttribute("type", "application/x-print-lodop");
document.documentElement.appendChild(LODOP);
CreatedOKLodopObject = LODOP;
} else
LODOP = CreatedOKLodopObject;
//==Lodop插件未安裝時提示下載地址:==
if ((!LODOP) || (!LODOP.VERSION)) {
if (ua.indexOf('Chrome') >= 0)
document.body.innerHTML = strHtmChrome + document.body.innerHTML;
if (ua.indexOf('Firefox') >= 0)
document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
return LODOP;
}
}
if (LODOP.VERSION < "6.2.2.6") {
if (!needCLodop())
document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
}
//===如下空白位置適合調用統(tǒng)一功能(如注冊語句、語言選擇等):==
//=======================================================
return LODOP;
} catch (err) {
alert("getLodop出錯:" + err);
}
}
到此這篇關于vue使用lodop打印控件實現(xiàn)瀏覽器兼容打印的文章就介紹到這了,更多相關vue瀏覽器兼容打印內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue實現(xiàn)將一維數(shù)組變換為三維數(shù)組
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)將一維數(shù)組變換為三維數(shù)組,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了Vue的方法和屬性案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-07-07
本篇文章主要介紹了vue如何在自定義組件中使用v-model，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue如何實現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實現(xiàn)清空this.$route.query的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
解決vue中無法動態(tài)修改jqgrid組件 url地址的問題
下面小編就為大家分享一篇解決vue中無法動態(tài)修改jqgrid組件 url地址的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue3實現(xiàn)表格編輯和刪除功能的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
Vue使用Antd中a-table實現(xiàn)表格數(shù)據(jù)列合并展示示例代碼
文章介紹了如何在Vue中使用Ant?Design的a-table組件實現(xiàn)表格數(shù)據(jù)列合并展示,通過處理函數(shù)對源碼數(shù)據(jù)進行操作,處理相同數(shù)據(jù)時合并列單元格2024-11-11
使用el-row及el-col頁面縮放時出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時出現(xiàn)空行的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03