Vue打印条码功能

最新推荐文章于 2024-02-27 11:21:59 发布
最新推荐文章于 2024-02-27 11:21:59 发布
阅读量503 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaa58962458/article/details/131589653
版权

JS：

//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==

//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
import {MessageBox} from 'element-ui'
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(那些不支持插件的浏览器):==
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及前)用本方法==
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();
  }
})();
function downClodop(){
	window.open('../../clodop/CLodop_Setup_for_Win32NT.exe');
}
//==获取LODOP对象主过程,判断是否安装、需否升级:==
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;
				MessageBox({title:'温馨提示',type:'warning',showCancelButton:true,message:'您还未安装打印控件，请下载安装后，刷新页面进行打印',callback:res=>{
					if(res=='confirm'){
						downClodop();
					}
				}});
            } 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.1")
                    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;
            }
        }
        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================
		LODOP.SET_LICENSES("福建弘扬软件有限公司", "B46AB1D5AB0D51496F77D05CDEF07DA1", "福建弘揚軟件有限公司", "422C034325836D448466C4AE85C5A705");
        LODOP.SET_LICENSES("THIRD LICENSE", "", "Hongyang Software Co. Ltd.", "6F770AA42F3788F3207210273561CFAD");
        //===============================================================================
        return LODOP;
    } catch (err) {
		MessageBox({title:'温馨提示',type:'warning',showCancelButton:true,message:'您还未安装打印控件，请下载安装后，刷新页面进行打印',callback:res=>{
					if(res=='confirm'){
						downClodop();
					}
				}});
        //alert("getLodop出错:" + err);
    }
}

export { getLodop };

VUE:

<script>
import { listCkRequest, getCkRequest, delCkRequest, addCkRequest, updateCkRequest,sumbitReceive,;
import { getLodop } from "@/assets/js/LodopFuncs.js";
export default {
  data() {
    return {
      isAuto: true,
      barLen: 10, //条码长度
      itemList:[],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询样本检验信息列表 */
    getList() {
      this.loading = true;
      listCkRequest(this.queryParams).then(response => {
        this.ckRequestList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },  
//打印方法
    handlePrintLabel(){
      var LODOP = getLodop();
      this.requestSelectList.forEach((item,index)=>{
        LODOP.PRINT_INIT(item.sampleInfo.name+"标签打印");
        LODOP.SET_PRINT_PAGESIZE(1,1060,200,"");
        LODOP.ADD_PRINT_IMAGE('1mm','1mm','20mm','6.5mm',"<img border='0' src='../../p-logo.png' />");
        LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//(可变形)扩展缩放模式
        LODOP.ADD_PRINT_BARCODE('8mm','3mm','19mm','10mm',"128Auto",item.busiCode);

        LODOP.ADD_PRINT_IMAGE('1mm','28mm','20mm','6.5mm',"<img  border='0' src='../../p-logo.png' />");
        LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//(可变形)扩展缩放模式
        LODOP.ADD_PRINT_BARCODE('8mm','30mm','19mm','10mm',"128Auto",item.busiCode);

        LODOP.ADD_PRINT_IMAGE('1mm','55mm','20mm','6.5mm',"<img border='0' src='../../p-logo.png' />");
        LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//(可变形)扩展缩放模式
        LODOP.ADD_PRINT_BARCODE('8mm','57mm','19mm','10mm',"128Auto",item.busiCode);

        LODOP.ADD_PRINT_IMAGE('1mm','82mm','20mm','6.5mm',"<img border='0' src='../../p-logo.png' />");
        LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//(可变形)扩展缩放模式
        LODOP.ADD_PRINT_BARCODE('8mm','84mm','19mm','10mm',"128Auto",item.busiCode);
        //LODOP.PREVIEWB();
        LODOP.PRINT();
      });
      sumbitPrintBar(this.requestSelectList).then(response=>{

      });

    }
  }
};
</script>

低调波
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueBarcode一个Vuejs的条码生成器
08-09
VueBarcode一个Vue.js的条码生成器
Vue3实现批量打印二维码与条形码
m0_51734815的博客
07-25 2082
这篇文章是我在工作途中对vue3批量生成二维码的一些见解，例如vue-qr（二维码）与jsbarcode（条形码）在vxe-table表格中的使用,二维码与条形码的批量生成与打印（打印时一页一个码）等。
vue3实现浏览器打印（条形码、二维码）
最新发布
weixin_64386986的博客
02-27 636
如果需要打印条形码， 可以使用vue3-barcode插件，但是这个插件不支持同时打印多个，最后一个总会覆盖前面的，如果只是单独打印一个条形码是完全可行性的， 如果需要循环、批量打印的话，建议使用js插件jsBarcode。如果你需要更高级的打印功能，比如打印预览、自定义打印模板等，你可能需要集成第三方库或API，以print-js为例。这个方法接受两个参数：第一个参数是要打印的 HTML 元素的 ID，第二个参数是一个选项对象，用于自定义打印设置。你还可以自定义打印设置。
使用VueBarcode结合vueEasyPrint打印条形码标签
CSNZのBlog
02-12 3018
VueBarcode + VueEasyPrint 合体,生成标签并实现打印功能
vue生成条形码和二维码并打印
mbrains的博客
03-17 2379
生成条形码和二维码合成标签并打印
vue3条码批量打印
qq_41972562的博客
04-21 778
2.封装条码组件self-barcode， 使用:class绑定，防止取到重复的内容。开始菜单搜索设备，=》设备和打印机》找到指定打印机，右键打印机首选项设置纸张大小。3.用封装好的组件进一步封装成业务组件self-goodsPrint。记得在watch监听props变化，重绘条码。4.页面调用，单条打印和批量打印，都传数组。1 用到插件 jsbarcode。先在main,js中注册全局组件。5.条码打印机设置，纸张大小调整。
vue实现打印条码功能
angela_ice的博客
10-11 2283
vue实现打印功能以及生成条码
vue3条码打印
weixin_56694018的博客
05-25 1200
这里是我需要的内容以及打印样式 自己可以参考修改。这里我没有去封装,可以来参考
【vue3】前端实现 生成条形码并调用打印机打印
amoureux555的博客
11-14 3401
【vue3】前端实现 生成条形码并调用打印机打印
Vue2/Vue3 实现条形码生成(以及打印条形码踩坑)
2303_77072102的博客
01-02 1346
解决方案 在同样的条形码条宽度手机的条形码识别宽度要小于扫描枪的识别宽度 可以配置options 的width配置项来解决。解决方案:options 的width配置项 不同打扫码枪能识别的条形码的条width宽度不一样。注意:在打印中使用条形码就不一样了 我们需要注意条形码容器的类型 可以回到第三步阅读。我司用到的扫码枪是PDA 可以在扫描出电脑上的但是无法扫码打印纸上的(注意:条形码的内容会影响条形码的长度 内容文本越长 条形码宽度越宽。怎么舒服怎么来 在打印踩的坑我放到文章第三步和结束了。
Vue生成条形码jsbarcode
学习记录
03-16 1782
这里写目录标题安装依赖效果图展示代码jsbarcode的使用 安装依赖 npm install jsbarcode --save 效果图展示 代码 <img id="barcode" /> import JsBarcode from 'jsbarcode' mounted () { JsBarcode('#barcode', this.SNCode, { height: 65, fontSize: 13, }); }, jsbarcode的使用
vue实现打印功能的两种方法
10-18
主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
Vue实现浏览器打印功能的代码
10-15
主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue 打印（模板套打）
01-08
vue 使用 print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线  安装 yarn add print-template 或 npm install print-template 内容类型 line 线条 barcode 条形码 qrcode 二维码 ...
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue 打印生成条形码二维码并打印
qq_25239049的博客
07-29 1465
1.安装资源 npm i jsbarcode npm i vue-print-nb 2.main.js中引入以下资源 //生成条形码并打印 import JsBarcode from 'jsbarcode' import Print from 'vue-print-nb' Vue.use(Print); import vJsBarcode from '@/components/JsBarcode' Vue.component("vJsBarcode", vJsBarcode); 3.新建JsBarcod
VUE中：printJS使用，附带JsBarcode条码生成器，网页转图片html2canvas，base64上传保存处理，二维码生成库qrcode，二维码/条码扫描识别，domtoimage
Beatingworldline的博客
08-06 1435
官网 JsBarcode官网 JsBarcode的GitHub-WIKI 普通打印页面元素内容与打印背景色丢失问题
vue：生成条形码
weixin_63896561的博客
06-16 1098
页面引用：（如果只需要一个条形码，则不需要list，直接给barcode绑定字符即可）
解决Lodop 8443端口找不到CLodopfuncs.js文件问题
清晨-阳光的博客
10-13 5762
解决Lodop打印时，8443端口加载不到CLodopfuncs.js文件的问题。(暂时解决)
vue loadop打印功能
07-11
要在Vue中实现打印功能，你可以使用`window.print()`方法来触发浏览器的打印功能。以下是一个简单的示例： 1. 首先，在你的Vue组件中添加一个按钮或其他触发打印的元素，例如： ```html <button @click="print">打印</button> ``` 2. 在Vue组件的`methods`中定义一个名为`print`的方法，该方法会在点击按钮时被调用： ```javascript methods: { print() { window.print(); } } ``` 3. 现在，当用户点击"打印"按钮时，浏览器的打印对话框将会弹出。 这只是一个简单的示例，你可以根据实际需求进行调整和扩展。注意，在某些浏览器中，`window.print()`可能会被阻止，因此用户需要手动允许弹出窗口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值