扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >实例讲解vue如何实现打印小票
  • 805

0
分享到

实例讲解vue如何实现打印小票

Vue 2022-11-22 23:11:50 805人浏览 八月长安
摘要

vue实现打印小票lodop 打印控件安装 lodop 打印控件（学习视频分享：Vue视频教程）lodop地址: Http://www.c-lodop.com/download.html把 LodopFuncs.js 引入项目//==本JS

vue实现打印小票

lodop 打印控件

安装 lodop 打印控件（学习视频分享：Vue视频教程）

lodop地址: Http://www.c-lodop.com/download.html

把 LodopFuncs.js 引入项目

//==本JS是加载Lodop插件或WEB打印服务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  =  "<br><font color='#FF00FF'>打印控件";

 var  strLodopInstall  =  strFontTag  +  "未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>";

 var  strLodopUpdate  =  strFontTag  +  "需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>";

 var  strLodop64Install  =  strFontTag  +  "未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>";

 var  strLodop64Update  =  strFontTag  +  "需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>";

 var  strCLodopInstallA  =  "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";

 var  strCLodopInstallB  =  "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";

 var  strCLodopUpdate  =  "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>";

 var  strLodop7FontTag  =  "<br><font color='#FF00FF'>Web打印服务Lodop7";

 var  strLodop7HrefX86  =  "点击这里<a href='Lodop7_linux_X86_64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";

 var  strLodop7HrefARM  =  "点击这里<a href='Lodop7_Linux_ARM64.tar.gz'  target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";

 var  strLodop7Install_X86  =  strLodop7FontTag  +  "未安装启动，"  +  strLodop7HrefX86;

 var  strLodop7Install_ARM  =  strLodop7FontTag  +  "未安装启动，"  +  strLodop7HrefARM;

 var  strLodop7Update_X86  =  strLodop7FontTag  +  "需升级，"  +  strLodop7HrefX86;

 var  strLodop7Update_ARM  =  strLodop7FontTag  +  "需升级，"  +  strLodop7HrefARM;

 var  strInstallOK  =  "，成功后请刷新本页面或重启浏览器。</font>";

 var  LODOP;

 try {

 var  isWinIE  = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));

 var  isWinIE64  =  isWinIE  && (/x64/i.test(navigator.userAgent));

 var  isLinuxX86  = (/Linux/i.test(navigator.platfORM)) && (/x86/i.test(navigator.platform));

 var  isLinuxARM  = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));

 if (needCLodop() ||  isLinuxX86  ||  isLinuxARM) {

 try {

 LODOP  = window.getCLodop();

} catch (err) { }

 if (!LODOP  &&  LoadJsState  !==  "complete") {

 if (!LoadJsState)

 alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程."); else

 alert("网页还没下载完毕，请稍等一下再操作.");

 return;

            }

 var  strAlertMessage;

 if (!LODOP) {

 if (isLinuxX86)

 strAlertMessage  =  strLodop7Install_X86;

 else  if (isLinuxARM)

 strAlertMessage  =  strLodop7Install_ARM;

 else

 strAlertMessage  =  strCLodopInstallA  + (CLodopIsLocal  ?  strCLodopInstallB  :  "");

 document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;

 return;

} else {

 if (isLinuxX86  &&  LODOP.CVERSION <  "7.0.4.3")

 strAlertMessage  =  strLodop7Update_X86;

 else  if (isLinuxARM  &&  LODOP.CVERSION <  "7.0.4.3")

 strAlertMessage  =  strLodop7Update_ARM;

 else  if (CLODOP.CVERSION <  "6.5.7.0")

 strAlertMessage  =  strCLodopUpdate;

 if (strAlertMessage)

 document.body.innerHTML  =  strAlertMessage  +  strInstallOK  +  document.body.innerHTML;

            }

} else {

 //==如果页面有Lodop插件就直接使用,否则新建:==

 if (oOBJECT  ||  oEMBED) {

 if (isWinIE)

 LODOP  = oOBJECT;

 else

 LODOP  =  oEMBED;

} else  if (!CreatedOKLodopObject) {

 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 (isWinIE)

 LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");

 else

 LODOP.setAttribute("type", "application/x-print-lodop");

 document.documentElement.appendChild(LODOP);

 CreatedOKLodopObject  =  LODOP;

} else

 LODOP  =  CreatedOKLodopObject;

 //==Lodop插件未安装时提示下载地址:==

 if ((!LODOP) || (!LODOP.VERSION)) {

 document.body.innerHTML  = (isWinIE64  ?  strLodop64Install  :  strLodopInstall) +  strInstallOK  +  document.body.innerHTML;

 return  LODOP;

            }

 if (LODOP.VERSION <  "6.2.2.6") {

 document.body.innerHTML  = (isWinIE64  ?  strLodop64Update  :  strLodopUpdate) +  strInstallOK  +  document.body.innerHTML;

            }

        }

 //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================

 //===============================================================================

 return  LODOP;

} catch (err) {

 alert("getLodop出错:"  +  err);

    }

}

去掉测试版本

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打印机不需要加这行

 LODOP.SET_PRINT_STYLE("FontSize", 15); // 设置打印字体

 LODOP.SET_PRINT_STYLE("Bold", 1); // 设置加粗

 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()

        },

以上就是实例讲解vue如何实现打印小票的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: 实例讲解vue如何实现打印小票

本文链接: https://lsjlt.com/news/173487.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 实例讲解vue如何实现打印小票
    vue实现打印小票lodop 打印控件安装 lodop 打印控件（学习视频分享：vue视频教程）lodop地址: http://www.c-lodop.com/download.html把 LodopFuncs.js 引入项目//==本JS...
    99+
    2022-11-22
    Vue
  • vue打印小票怎么实现
    这篇文章主要介绍“vue打印小票怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue打印小票怎么实现”文章能帮助大家解决问题。lodop 打印控件安装 lodop 打印控件lodop地址:&...
    99+
    2023-07-05
  • vue怎么实现打印小票
    这篇文章主要讲解了“vue怎么实现打印小票”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现打印小票”吧！vue实现打印小票lodop 打印控件安装 lodop 打印控件把 Lod...
    99+
    2023-07-04
  • php如何实现小票打印
    这篇文章主要介绍了php如何实现小票打印，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。php实现小票打印的方法：1、在优声云打印开放平台注册账号；2、查看打印机接口开发文档；...
    99+
    2023-06-22
  • vue实战：打印小票的实现方法
    vue也能实现打印小票？下面本篇文章就带大家详细了解一下怎么通过安装 lodop 打印控件，实现打印小票，本文附有详细实例代码哦，希望对大家有所帮助！lodop 打印控件安装 lodop 打印控件lodop地址: http://www.c-...
    99+
    2023-05-14
    Vue
  • php 怎么实现小票打印
    本文操作环境：Windows7系统，PHP7.4版，Dell G3电脑。php如何实现热敏58mm小票打印机打印？用php开发的后台管理系统中要实现订单打印小票的功能，通过热敏58mm的小票打印机把订单打出来，php中如何实现，有源码更好，...
    99+
    2018-08-19
    php
  • javaScript如何连接打印机打印小票
    这篇文章主要介绍了javaScript如何连接打印机打印小票，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。如下所示：<%@ ...
    99+
    2024-04-02
  • 微信小程序如何实现蓝牙连接小票打印机
    这篇文章将为大家详细讲解有关微信小程序如何实现蓝牙连接小票打印机，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1.连接蓝牙（第一次发表博客）第一步打开蓝牙并搜索附近打印机...
    99+
    2024-04-02
  • Android打印机--小票打印格式及模板设置实例代码
    小票打印就是向打印设备发送控制打印格式的指令集，而这些打印格式需要去查询对应打印机的API文档，这里我把常用的api给封装了一下 文字对齐方式 打印字体大小 字体是...
    99+
    2022-06-06
    模板 Android
  • vue如何实现打印功能
    vue实现打印功能的方法：1.打开终端输入“cnpm i vue-print-nb -S”命令安装依赖；2、在mian.js中引入vue-print-nb；3、在页面中设置一个button按钮实现打印功能即可。具体操作步骤：首先需要打开终端...
    99+
    2024-04-02
  • Java编程打印购物小票实现代码
    简单介绍运行环境：语言：Java工具：eclipse系统：Windows7（打印设备暂时没有，所以只能提供预览图）最近，项目需要为商城做一个购物小票的打印功能，日常我们去超市买东西，结账的时候收银员都会打印一个小票，一般的商城也都需要这样的...
    99+
    2023-05-30
    java 打印小票 ava
  • 如何使用vue实现打印功能
    这篇“如何使用vue实现打印功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用vue实现打印功能”文章吧。第一种方法...
    99+
    2023-07-04
  • VUE如何利用vue-print-nb实现打印功能详解
    目录一、安装vue-print-nb二、引入Vue项目三、参数说明四、应用五、注意点补充：空白页的解决方法总结一、安装vue-print-nb 没有什么前提要求，直接安装即可，但因为...
    99+
    2024-04-02
  • vue中的vue-print-nb如何实现页面打印
    目录安装在main.js中全局引入页面中使用安装 npm install vue-print-nb --save 在main.js中全局引入 import Print from 'v...
    99+
    2024-04-02
  • 实例讲解golang如何实现集合
    近年来，Golang 由于其简单，高效和可靠性受到了广泛的关注。与其他编程语言相比，它被称为编写高性能服务器软件和分布式系统的利器。此外， Golang 还提供了一些强大的包和库，以帮助开发人员更轻松地构建应用程序。在这些包和库中，集合库是...
    99+
    2023-05-14
  • Vue利用插件实现打印功能的示例详解
    目录安装 引入 使用 这里介绍一个插件（vue-print-nb），蛮好用的，用起来很方便，所以想记录一下  npm官方： https://w...
    99+
    2023-03-19
    Vue实现打印功能 Vue打印功能 Vue打印
  • java如何实现打印机的打印功能
    要实现打印机的打印功能，可以使用Java中的打印机相关的API。以下是一个简单的示例代码：```javaimport javax.p...
    99+
    2023-09-01
    java
  • JS中如何实现打印
    小编给大家分享一下JS中如何实现打印，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！JS实现打印两方法要实现点击“打印”按钮以后就将页面打印出来JS中一般有两种方法。1.用Object实现打...
    99+
    2024-04-02
  • javascript如何实现打印功能
    这篇文章主要介绍“javascript如何实现打印功能”，在日常操作中，相信很多人在javascript如何实现打印功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”java...
    99+
    2024-04-02
  • JavaScript如何实现打印操作
    这篇文章给大家分享的是有关JavaScript如何实现打印操作的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。在JavaScript中，可以使用Window对象的print()方法来实现打印操作，语法格式“wind...
    99+
    2023-06-15
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作