在官網(wǎng)上下載一個安裝包http://www.lodop.net/download.html，把里面的LodopFuncs.js文件直接復(fù)制到j(luò)s文件中就行益兄，下列文件是修改了一些樣式及首次使用時步咪，可客戶直接點(diǎn)擊下載的修改，
·
其實(shí)是所有 a標(biāo)簽 中的 href 路徑 href='/Clodop/CLodop_Setup_for_Win32NT.exe'修改為打包后的本地路徑就可以了芋类，在這里在官網(wǎng)下載好的安裝包放在public文件中,不然打包后會找不到下載路徑，別問我怎么知道的，因?yàn)橐呀?jīng)踩過坑了
·找LodopFuncs.js文件中所有的a標(biāo)簽的href路徑磷支，修改為本地的地址就行（可以讓用戶不用找官網(wǎng)，直接點(diǎn)擊下載）食寡，如果不需要的話雾狈，就用官網(wǎng)上的LodopFuncs.js就行
// 重要代碼；
var strHtmChrome =
"<br><br><font color='#FF00FF'>(如果此前正常抵皱，僅因?yàn)g覽器升級或重安裝而出問題善榛，需重新執(zhí)行以上安裝）</font>";
var strCLodopInstall_1 =
"<br><font color='#FF00FF'>Web打印服務(wù)CLodop未安裝啟動辩蛋，點(diǎn)擊這里<a href='/Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>下載執(zhí)行安裝</a>";
var strCLodopInstall_2 =
"<br>（若此前已安裝過，可<a href='CLodop.protocol:setup' target='_self'>點(diǎn)這里直接再次啟動</a>）";
var strCLodopInstall_3 = "移盆，成功后請刷新頁面悼院。</font>";
var strCLodopUpdate =
"<br><font color='#FF00FF'>Web打印服務(wù)CLodop需升級!點(diǎn)擊這里<a href='./Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>執(zhí)行升級</a>,升級后請刷新頁面。</font>";
在需要的頁面中引入LodopFuncs.js文件咒循，此處我試過用class類名樣式据途，但是沒有效果，應(yīng)該是只能用行內(nèi)樣式
import { getLodop } from "@/assets/js/LodopFuncs.js";
btnClickPrint(item) {
// console.log("打印",item);
this.LODOP = getLodop(); //調(diào)用getLodop獲取LODOP對象
let htmlContent;
// this.payList.map(item=>{
htmlContent = `<div style="width:600px" class="print-box"> 這里為測試打印的
<p style="color:red">紅色的字體</p>
</div>`
this.LODOP.PRINT_INIT("");
//設(shè)定紙張大小 (1橫向2豎向,寬度,高度,頁面大小名稱寬高都設(shè)置為0的時候才可以設(shè)置"A5","A4")
// LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4');
this.LODOP.SET_PRINT_STYLE('FontSize', 14) // 樣式
// ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加純文本項(xiàng).
var body = '<body>' + htmlContent + '</body>'
this.LODOP.ADD_PRINT_HTM(88, 20, 2000, 2000, body) // 增加超文本項(xiàng)（打印內(nèi)容即為body內(nèi)容）
this.LODOP.PREVIEW();
}
· 打印效果預(yù)覽
image.png
· LodopFuncs.js
var CreatedOKLodop7766 = null,
CLodopIsLocal;
//====判斷是否需要 Web打印服務(wù)CLodop:===
//===(不支持插件的瀏覽器版本需要用它)===
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 src1 = "http://localhost:8000/CLodopfuncs.js?priority=1";
var src2 = "http://localhost:18000/CLodopfuncs.js?priority=0";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var oscript = document.createElement("script");
oscript.src = src1;
head.insertBefore(oscript, head.firstChild);
oscript = document.createElement("script");
oscript.src = src2;
head.insertBefore(oscript, head.firstChild);
CLodopIsLocal = !!(src1 + src2).match(/\/\/localho|\/\/127.0.0./i);
}
//====獲取LODOP對象的主過程：====
function getLodop(oOBJECT, oEMBED) {
var strHtmInstall =
"<br><font color='#FF00FF'>打印控件未安裝!點(diǎn)擊這里<a href='./install_lodop32.exe' download='install_lodop32.exe' target='_self'>執(zhí)行安裝</a>,安裝后請刷新頁面或重新進(jìn)入叙甸。</font>";
var strHtmUpdate =
"<br><font color='#FF00FF'>打印控件需要升級!點(diǎn)擊這里<a href='/install_lodop32.exe' download='install_lodop32.exe' target='_self'>執(zhí)行升級</a>,升級后請重新進(jìn)入颖医。</font>";
var strHtm64_Install =
"<br><font color='#FF00FF'>打印控件未安裝!點(diǎn)擊這里<a href='/install_lodop64.exe' download='install_lodop64.exe' target='_self'>執(zhí)行安裝</a>,安裝后請刷新頁面或重新進(jìn)入。</font>";
var strHtm64_Update =
"<br><font color='#FF00FF'>打印控件需要升級!點(diǎn)擊這里<a href='/install_lodop64.exe' download='install_lodop64.exe' target='_self'>執(zhí)行升級</a>,升級后請重新進(jìn)入裆蒸。</font>";
var strHtmFireFox =
"<br><br><font color='#FF00FF'>（注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請?jiān)凇竟ぞ摺?>【附加組件】->【擴(kuò)展】中先卸它）</font>";
var strHtmChrome =
"<br><br><font color='#FF00FF'>(如果此前正常便脊，僅因?yàn)g覽器升級或重安裝而出問題，需重新執(zhí)行以上安裝）</font>";
var strCLodopInstall_1 =
"<br><font color='#FF00FF'>Web打印服務(wù)CLodop未安裝啟動光戈，點(diǎn)擊這里<a href='/Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>下載執(zhí)行安裝</a>";
var strCLodopInstall_2 =
"<br>（若此前已安裝過哪痰，可<a href='CLodop.protocol:setup' target='_self'>點(diǎn)這里直接再次啟動</a>）";
var strCLodopInstall_3 = "，成功后請刷新頁面久妆。</font>";
var strCLodopUpdate =
"<br><font color='#FF00FF'>Web打印服務(wù)CLodop需升級!點(diǎn)擊這里<a href='./Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>執(zhí)行升級</a>,升級后請刷新頁面晌杰。</font>";
var LODOP;
var lodopMessage = "";
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") {
return { lodopMessage: "網(wǎng)頁還沒下載完畢，請稍等一下再操作." };
}
if (!LODOP) {
lodopMessage =
strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + lodopMessage;
return { lodopMessage };
} else {
if (CLODOP.CVERSION < "3.0.8.3") {
lodopMessage = strCLodopUpdate + lodopMessage;
}
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 (!CreatedOKLodop7766) {
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);
CreatedOKLodop7766 = LODOP;
} else LODOP = CreatedOKLodop7766;
//=====Lodop插件未安裝時提示下載地址:==========
if (!LODOP || !LODOP.VERSION) {
if (ua.indexOf("Chrome") >= 0) lodopMessage = strHtmChrome + lodopMessage;
if (ua.indexOf("Firefox") >= 0) lodopMessage = strHtmFireFox + lodopMessage;
lodopMessage = (is64IE ? strHtm64_Install : strHtmInstall) + lodopMessage;
return { LODOP, lodopMessage };
}
}
if (LODOP.VERSION < "6.2.2.6") {
if (!needCLodop()) lodopMessage = (is64IE ? strHtm64_Update : strHtmUpdate) + lodopMessage;
}
//===如下空白位置適合調(diào)用統(tǒng)一功能(如注冊語句肋演、語言選擇等):==
LODOP.SET_LICENSES("ljq", "", "", "");
//=======================================================
return { LODOP: LODOP, lodopMessage: lodopMessage };
} catch (err) {
return { lodopMessage: "getLodop出錯" + err };
}
}
export {
getLodop
}
