正文

vue打印电子面单（后台传来的html的解决方案）

绿树下仰望星空  2022-02-13  149

关键词：

//打印可以使用lodop这个经典的前端打印控件

1、在vue assets目录新建LodopFuncs.js,(可以自由选择其他路径),里面的内容为：

var CreatedOKLodop7766=null;
 
//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
 try{
  var ua=navigator.userAgent;
  if (ua.match(/WindowssPhone/i) !=null) return true;
  if (ua.match(/iPhone|iPod/i) != null) return true;
  if (ua.match(/Android/i) != null) return true;
  if (ua.match(/EdgeD?d+/i) != null) return true;
 
  var verTrident=ua.match(/TridentD?d+/i);
  var verIE=ua.match(/MSIED?d+/i);
  var verOPR=ua.match(/OPRD?d+/i);
  var verFF=ua.match(/FirefoxD?d+/i);
  var x64=ua.match(/x64/i);
  if ((verTrident==null)&&(verIE==null)&&(x64!==null))
   return true; else
  if ( verFF !== null) {
   verFF = verFF[0].match(/d+/);
   if ((verFF[0]>= 42)||(x64!==null)) return true;
  } else
  if ( verOPR !== null) {
   verOPR = verOPR[0].match(/d+/);
   if ( verOPR[0] >= 32 ) return true;
  } else
  if ((verTrident==null)&&(verIE==null)) {
   var verChrome=ua.match(/ChromeD?d+/i);
   if ( verChrome !== null ) {
    verChrome = verChrome[0].match(/d+/);
    if (verChrome[0]>=42) return true;
   };
  };
  return false;
 } catch(err) {return true;};
};
 
//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
 var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
 var oscript = document.createElement("script");
 oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
 head.insertBefore( oscript,head.firstChild );
 
 //引用双端口(8000和18000）避免其中某个被占用：
 oscript = document.createElement("script");
 oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";
 head.insertBefore( oscript,head.firstChild );
};
 
//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){
 var strHtmInstall="<br><font color=‘#FF00FF‘>打印控件未安装!点击这里<a href=‘install_lodop32.exe‘ target=‘_self‘>执行安装</a>,安装后请刷新页面或重新进入。</font>";
 var strHtmUpdate="<br><font color=‘#FF00FF‘>打印控件需要升级!点击这里<a href=‘install_lodop32.exe‘ target=‘_self‘>执行升级</a>,升级后请重新进入。</font>";
 var strHtm64_Install="<br><font color=‘#FF00FF‘>打印控件未安装!点击这里<a href=‘install_lodop64.exe‘ target=‘_self‘>执行安装</a>,安装后请刷新页面或重新进入。</font>";
 var strHtm64_Update="<br><font color=‘#FF00FF‘>打印控件需要升级!点击这里<a href=‘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="<br><font color=‘#FF00FF‘>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href=‘http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip‘ target=‘_self‘>执行安装</a>,安装后请刷新页面。</font>";
 var strCLodopUpdate="<br><font color=‘#FF00FF‘>CLodop云打印服务需升级!点击这里<a href=‘CLodop_Setup_for_Win32NT.exe‘ target=‘_self‘>执行升级</a>,升级后请刷新页面。</font>";
 var LODOP;
 try{
  var isIE = (navigator.userAgent.indexOf(‘MSIE‘)>=0) || (navigator.userAgent.indexOf(‘Trident‘)>=0);
  if (needCLodop()) {
   try{ LODOP=getCLodop();} catch(err) {};
   if (!LODOP && document.readyState!=="complete") {alert("C-Lodop没准备好，请稍后再试！"); return;};
   if (!LODOP) {
    // if (isIE) document.write(strCLodopInstall); else
     // document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML;
    // return;
   } else {
 
    if (CLODOP.CVERSION<"3.0.0.2") {
     if (isIE) document.write(strCLodopUpdate); else
      document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML;
    };
    if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
    if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
   };
  } else {
   var is64IE = isIE && (navigator.userAgent.indexOf(‘x64‘)>=0);
   //=====如果页面有Lodop就直接使用，没有则新建:==========
   if (oOBJECT!=undefined || oEMBED!=undefined) {
    if (isIE) LODOP=oOBJECT; else LODOP=oEMBED;
   } else if (CreatedOKLodop7766==null){
    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==null)||(typeof(LODOP.VERSION)=="undefined")) {
    if (navigator.userAgent.indexOf(‘Chrome‘)>=0)
     document.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML;
    if (navigator.userAgent.indexOf(‘Firefox‘)>=0)
     document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML;
    if (is64IE) document.write(strHtm64_Install); else
    if (isIE)  document.write(strHtmInstall);  else
     document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;
    return LODOP;
   };
  };
  if (LODOP.VERSION<"6.0") {
   if (!needCLodop()){
    if (is64IE) document.write(strHtm64_Update); else
    if (isIE) document.write(strHtmUpdate); else
     document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML;
   };
   return LODOP;
  };
  //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
  //LODOP.SET_LICENSES("北京XXXXX公司","8xxxxxxxxxxxxx5","","");
 
  //===========================================================
  return LODOP;
 } catch(err) {alert("getLodop出错:"+err);};
};

　　2、在util目录下，新建print.js,引用并封装刚才建的loadopFuncs.js文件

import { getLodop } from "@/assets/LodopFuncs";
export const printPdf = (html) => {
    let LODOP = getLodop();
    LODOP.SET_PRINT_STYLEA(0, "HtmWaitMilSecs", 1000);

    LODOP.PRINT_INIT("订货单");
    LODOP.SET_PRINT_STYLE("FontSize", 18);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_HTM(
        "0",
        "0",
        "100%",
        "100%",
        html
    );
    LODOP.PRINT();
}

　　3、页面引用并使用

import { printPdf } from "@/utils/print";



printpdf(html);     //html指的是后台传过来的html面单信息.

　　//注意，需要到lodop官网，下载对应的

Lodop综合版(Lodop6.226+CLodop4.088)，安装里面的install_lodop64.exe、CLodop_Setup_for_Win32NT.exe这两个文件

各种电子面单_api接口

电子面单是一种通过热敏纸打印输出纸质物流面单的物流服务。通过热感应显示文字，打印速度比传统针式打印速度提升4~6倍。电子面单以接口形式嵌入到自己的系统、网站上，可以在自己的平台操作打印电子面单。&nb... 查看详情

电子面单打印机如何使用

...等，指的是根据物流公司的规定要求，在不干胶热敏纸上打印客户收发件信息的面单。　　电子面单在国外已经成功应用多年，如联邦快递(FedEx)和国际快递(Ups)。而在国内，随着电商平台的迅速崛起，快递物流行业也进入飞速发... 查看详情

电子面单批量打印接口对接（含打印控件）

...、ERP系统、WEB端、APP移动端等企业发货量较大，电子面单打印接口的需求也日益增加，现在给大家做一下梳理和使用方法介绍。目前支持批量打印电子面单的有快递鸟、菜鸟和快递公司。但是快递公司仅能打印本公司的电子面单... 查看详情

电子面单api接口_java调用示例

电子面单打印机怎么安装

参考技术A　　1、安装电子面单。　　第一步：打开打印机右盖，露出纸卷仓，抬起打印头压臂；第二步，电子面单依次从打印机背部穿纸口和纸导向杆下方穿过；第三步：将首张面单的前边缘与撕纸标尺的边缘对齐，纸张导向... 查看详情

关于菜鸟的圆通电子面单打印(代码片段)

1.https://open.taobao.com/docs/doc.htm?spm=a21da.7629140.0.0.97iBG8&docType=1&articleId=107052电子面单接入文档（LINK接入） 2. https://dayin.cainiao.com/miandan/subscription/branchRechargeInfo.ht 查看详情

关于快递鸟的顺丰电子面单打印(代码片段)

1.form表单传递数据,到控制器,之后的复制操作1顺丰信息2//快递信息3$eorder=[];4$eorder["ShipperCode"]=$express_number[$number];//快递公司编码5$eorder["OrderCode"]=$ship_order_data[‘ship_order_number‘];//发货单编号()67$eorder["PayType"]=3;// 查看详情

快递鸟打印电子面单数据验证不通过，非法参数

下载官方的批量打印面单Demo，修改成自己ID和Key后运行一直报错，提示“数据验证不通过，非法参数”等，弄了半天没弄出个所以然，想了下应该是加密的问题，调试了下发现GetIp()获取到的ip地址既不是本机... 查看详情

顺丰电子面单api接口怎么接入？

...司，然后快递公司与商家联系确认具体的合作细节，热敏打印纸由快递公司提供，打印机即可由商家自行购买查看详情

各种电子面单-api接口(顺丰快递鸟菜鸟)(代码片段)

...思可能并不是很了解；说白了，就是快递员给你打印的快递单的电子版。专业解释：电子面单是一种通过热敏纸打印输出纸质物流面单的物流服务。通过热感应显示文字&#x 查看详情

免费圆通电子面单接口对接

...系统平台使用的下单接口，满足客户在线发货需求并提供打印面单的服务，客户通过网络选择物流公司发送请求通知贵公司有快递要发货，把数据通过此接口转发到快递鸟，由快递鸟为您通知对应的快递公司快递员上门取件。电... 查看详情

圆通电子面单接口对接及调试

电商适用电子面单接口对接案例

...文档，逐一对接菜鸟和快递鸟是电子面单接口集成方，能打印多家快递电子面单，菜鸟目前支持15家，快递鸟支持20家，基本上都是常用的快递，以下接口对接以快递鸟接口为例在对接前需要到快递鸟网站注册账号，才能得... 查看详情

电子面单打印模板规格汇总以及使用指南

...需要)1.3,完成实名认证流程1.4,订购一个免费套餐1.5,准备打印机、打印纸打印机：???电子面单模板对打印机品牌、型号等没有要求，只要是热敏打印机即可，常见品牌如：斑马、得力、快麦、汉印、佳博等。???打印机可由快递网... 查看详情

电脑上怎么下载，安装阿里巴巴？

...考技术B回答1在阿里巴巴服务市场，在搜索框输入《智能打印》进行搜索，找到：智能快递单打印_热敏打印订购后并且进入软件。2进入软件后首先进行菜鸟电子面单授权3电子面单授权完成后，开始打印发货即可。注意事项必须... 查看详情

电子面单打印模板规格汇总以及使用指南

快递---快递鸟的电子面单取消操作-----------

...快递数据，这边由于业务需求，有可能会对已取号的快递电子面单做出处理为此自己东拉西扯总算完善了接口当然详细的明细还得各位有使用的朋友，自己去查看所提供的api----------------------------------------------------------仅限数据... 查看详情

常用电子面单接口对接技术文档

一.电子面单接口类型及定义1.快递电子面单接口：快递公司自己开发的电子面单服务，商家使用必须快递公司上门做系统对接，使用一家快递则需要对接一次。2.菜鸟电子面单接口：可一次对接15家快递公司，无需和每一家... 查看详情