[亲测]vue使用C-lodop打印总结

其他 2019-10-25 10:21:44 阅读次数: 0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/qq_43652509/article/details/100014045

按照我步骤走不迷路
1.先来到官方网站
下图中的1点击下载，下载后安装，傻瓜式安装方式就不再阐述了
下图中的2点击下载，下载后大概的看一下(内容不是很重要但是还是需要看的)
在这里插入图片描述
2.找到你安装好的C-lodop，将其启动 如下图
在这里插入图片描述
3.访问本地的教程，这里默认你的8000端口之前没有被占用，即使被占用那就访问18000端口，若仔细看文档的都知道，访问成功如下图仔细琢磨以下内容,他给的代码是js的，不适合vue
在这里插入图片描述
4.咱这个打印只在前台就可以完成，下面开始上代码
官方上说在 Program Files (x86)\MountTaiSoftware\CLodop32\Rootdir\CLodopDemos 文件下找到 LodopFuncs.js 文件粘到自己项目中，但是我使用这个文件没有成功，于是在网上找到以下js文件

var CreatedOKLodop7766=null;

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
  try{
    var ua=navigator.userAgent;
    if (ua.match(/Windows\sPhone/i) !=null) return true;
    if (ua.match(/iPhone|iPod/i) != null) return true;
    if (ua.match(/Android/i) != null) return true;
    if (ua.match(/Edge\D?\d+/i) != null) 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==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(/Chrome\D?\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);};
};

5.来到vue页面
5.1.将刚刚复制的js文件导入需要打印的页面

import { getLodop } from '@/assets/js/LodopFuncs'

在这里插入图片描述
5,2.由于打印分为：直接打印，打印预览，打印维护，打印设计。所以我呢就把这几个都添加了

 <a-dropdown>
        <a-button icon="printer" type="primary">
          打印选项
          <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item type="primary" @click="printPreview(0)">直接打印</a-menu-item>
          <a-menu-item type="primary" @click="printPreview(1)">打印预览</a-menu-item>
          <a-menu-item type="primary" @click="printPreview(2)">打印维护</a-menu-item>
          <a-menu-item type="primary" @click="printPreview(3)">打印设计</a-menu-item>
        </a-menu>
</a-dropdown>

在这里插入图片描述
5.3在 mothods 方法中添加方法，百分之九十的打印方式我都试过了，可能下面没有，但是不要慌，往下看

printPreview(s) {
      this.CreateOneFormPage()
      if (s == 0) {
        LODOP.PRINT() //直接打印
      }
      if (s == 1) {
        LODOP.PREVIEW() //打印预览
      }
      if (s == 2) {
        LODOP.PRINT_SETUP() //打印维护
      }
      if (s == 3) {
        LODOP.PRINT_DESIGN() //打印设计
      }
    },
    CreateOneFormPage() {
      LODOP = getLodop()
      //样式
      var olstyle1 = '<style>' + document.getElementById('olstyle1') + '</style>'
      var body = olstyle1 + '<body>' + document.getElementById('form1').innerHTML + '</body>'
      LODOP.PRINT_INIT('订单') //打印初始化
      LODOP.SET_PRINT_STYLE('FontSize', 18) //设置对象风格
      LODOP.SET_PRINT_STYLE('Bold', 1) ////设置对象风格
      LODOP.ADD_PRINT_TEXT(50, 521, 130, 39, this.description) //增加纯文本项
      LODOP.SET_PRINT_PAGESIZE(0, 2000, 2000, '') //设定纸张大小
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', '55%')//设置缩放
      LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, '')//设置窗口
      // 打印二维码
      // LODOP.ADD_PRINT_BARCODE(23,23,233,233,"QRCode","https://blog.csdn.net/qq_43652509");
      //打印网址
      // LODOP.ADD_PRINT_URL(222,2000,2000,233,"https://blog.csdn.net/qq_43652509");
      //打印图片
      // LODOP.ADD_PRINT_IMAGE(100,100,400,400,"<img border='0' src='http://s1.sinaimg.cn/middle/4fe4ba17hb5afe2caa990&690' width='345' height='250'>");
      LODOP.ADD_PRINT_HTM(88, 20, 2000, 2000, body) //增加超文本项
    }

在这里插入图片描述
5.4 案例大全，我呢就是从这里面一点点看一点点研究出来的
5.4.1有些会说明语句的每个属性什么意思，但是有些没有，不慌，一个 F12 就可以看到 script 标签
在这里插入图片描述
5.4.2点进去,对，你需要的就在下面，照着葫芦画瓢，大家都会吧！一共51个案例，如果都试过了，那我就可以向你请教请教了
在这里插入图片描述
6.到这也差不多就结束了，最后给大家推荐C-lodop的官方QQ讨论群 ：580517659 ，我也在这个群里哦
另外我的QQ：2827778977，欢迎随时骚扰

猜你喜欢

转载自blog.csdn.net/qq_43652509/article/details/100014045
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022