這篇文章主要介紹“vue打印小票怎么實現(xiàn)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“vue打印小票怎么實現(xiàn)”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)綿陽機(jī)房托管報價，主機(jī)托管價格性價比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。
lodop 打印控件
安裝 lodop 打印控件
lodop地址: http://www.c-lodop.com/download.html
把 LodopFuncs.js 引入項目
//==本JS是加載Lodop插件或Web打印服務(wù)CLodop/Lodop7的綜合示例，可直接使用，建議理解后融入自己程序==
//用雙端口加載主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
var MainJS = "CLodopfuncs.js",
URL_WS1 = "ws://localhost:8000/" + MainJS, //ws用8000/18000
URL_WS2 = "ws://localhost:18000/" + MainJS,
URL_HTTP1 = "http://localhost:8000/" + MainJS, //http用8000/18000
URL_HTTP2 = "http://localhost:18000/" + MainJS,
URL_HTTP3 = "https://localhost.lodop.net:8443/" + MainJS; //https用8000/8443
var CreatedOKLodopObject, CLodopIsLocal, LoadJsState;
//==判斷是否需要CLodop(那些不支持插件的瀏覽器):==
export function needCLodop() {
try {
var ua = navigator.userAgent;
if (ua.match(/Windows\sPhone/i) ||
ua.match(/iPhone|iPod|iPad/i) ||
ua.match(/Android/i) ||
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;
}
}
//==檢查加載成功與否，如沒成功則用http(s)再試==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
export function checkOrTryHttp() {
if (window.getCLodop) {
LoadJsState = "complete";
return true;
}
if (LoadJsState == "loadingB" || LoadJsState == "complete") return;
LoadJsState = "loadingB";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var JS1 = document.createElement("script")
, JS2 = document.createElement("script")
, JS3 = document.createElement("script");
JS1.src = URL_HTTP1;
JS2.src = URL_HTTP2;
JS3.src = URL_HTTP3;
JS1.onload = JS2.onload = JS3.onload = JS2.onerror = JS3.onerror = function () { LoadJsState = "complete"; }
JS1.onerror = function (e) {
if (window.location.protocol !== 'https:')
head.insertBefore(JS2, head.firstChild); else
head.insertBefore(JS3, head.firstChild);
}
head.insertBefore(JS1, head.firstChild);
}
//==加載Lodop對象的主過程:==
(function loadCLodop() {
if (!needCLodop()) return;
CLodopIsLocal = !!((URL_WS1 + URL_WS2).match(/\/\/localho|\/\/127.0.0./i));
LoadJsState = "loadingA";
if (!window.WebSocket && window.MozWebSocket) window.WebSocket = window.MozWebSocket;
//ws方式速度快(小于200ms)且可避免CORS錯誤,但要求Lodop版本足夠新:
try {
var WSK1 = new WebSocket(URL_WS1);
WSK1.onopen = function (e) { setTimeout("checkOrTryHttp();", 200); }
WSK1.onmessage = function (e) { if (!window.getCLodop) eval(e.data); }
WSK1.onerror = function (e) {
var WSK2 = new WebSocket(URL_WS2);
WSK2.onopen = function (e) { setTimeout("checkOrTryHttp();", 200); }
WSK2.onmessage = function (e) { if (!window.getCLodop) eval(e.data); }
WSK2.onerror = function (e) { checkOrTryHttp(); }
}
} catch (e) {
checkOrTryHttp();
}
})();
//==獲取LODOP對象主過程,判斷是否安裝、需否升級:==
export function getLodop(oOBJECT, oEMBED) {
var strFontTag = "
（若此前已安裝過，可
去掉測試版本
myPreview1() {
// this.CreateImage();
// this.LODOP.PRINT();
let LODOP = getLodop();
console.log(' LODOP', LODOP)
var strHTML = document.getElementById("box").innerHTML;
LODOP.PRINT_INIT("")
LODOP.SET_LICENSES("", "EE0887D00FCC7D29375A695F728489A6", "C94CEE276DB2187AE6B65D56B3FC2848", ""); //去掉測試版本
// LODOP.SET_PRINT_PAGESIZE(3, "80mm", "10mm", "CreateCustomPage"); //80打印機(jī)不需要加這行
LODOP.SET_PRINT_STYLE("FontSize", 15); // 設(shè)置打印字體
LODOP.SET_PRINT_STYLE("Bold", 1); // 設(shè)置加粗
LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Height:90%");
LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");
LODOP.ADD_PRINT_HTM(10, 10, "90%", "70%", strHTML);
LODOP.PRINT();//
// this.LODOP.PREVIEW()
}
關(guān)于“vue打印小票怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
重慶分公司
重慶分公司
