在官网上下载一个安装包http://www.lodop.net/download.html，把里面的LodopFuncs.js文件直接复制到js文件中就行，下列文件是修改了一些样式及首次使用时，可客户直接点击下载的修改，
·
其实是所有 a标签 中的 href 路径 href='/Clodop/CLodop_Setup_for_Win32NT.exe'修改为打包后的本地路径就可以了，在这里在官网下载好的安装包放在public文件中,不然打包后会找不到下载路径，别问我怎么知道的，因为已经踩过坑了
·找LodopFuncs.js文件中所有的a标签的href路径，修改为本地的地址就行（可以让用户不用找官网，直接点击下载），如果不需要的话，就用官网上的LodopFuncs.js就行
// 重要代码；
var strHtmChrome =
"<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
var strCLodopInstall_1 =
"<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='/Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
var strCLodopInstall_2 =
"<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
var strCLodopInstall_3 = "，成功后请刷新页面。</font>";
var strCLodopUpdate =
"<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='./Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
在需要的页面中引入LodopFuncs.js文件，此处我试过用class类名样式，但是没有效果，应该是只能用行内样式
import { getLodop } from "@/assets/js/LodopFuncs.js";
btnClickPrint(item) {
// console.log("打印",item);
this.LODOP = getLodop(); //调用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("");
//设定纸张大小 (1横向2竖向,宽度,高度,页面大小名称宽高都设置为0的时候才可以设置"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)增加纯文本项.
var body = '<body>' + htmlContent + '</body>'
this.LODOP.ADD_PRINT_HTM(88, 20, 2000, 2000, body) // 增加超文本项（打印内容即为body内容）
this.LODOP.PREVIEW();
}
· 打印效果预览
image.png
· LodopFuncs.js
var CreatedOKLodop7766 = null,
CLodopIsLocal;
//====判断是否需要 Web打印服务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'>打印控件未安装!点击这里<a href='./install_lodop32.exe' download='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtmUpdate =
"<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='/install_lodop32.exe' download='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtm64_Install =
"<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='/install_lodop64.exe' download='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtm64_Update =
"<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='/install_lodop64.exe' download='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtmFireFox =
"<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
var strHtmChrome =
"<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
var strCLodopInstall_1 =
"<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='/Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
var strCLodopInstall_2 =
"<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
var strCLodopInstall_3 = "，成功后请刷新页面。</font>";
var strCLodopUpdate =
"<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='./Clodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</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: "网页还没下载完毕，请稍等一下再操作." };
}
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;
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
LODOP.SET_LICENSES("ljq", "", "", "");
//=======================================================
return { LODOP: LODOP, lodopMessage: lodopMessage };
} catch (err) {
return { lodopMessage: "getLodop出错" + err };
}
}
export {
getLodop
}
