在vue项目中使用lodop打印功能---条形码打印案例

第一步:安装barcode

npm install jsbarcode --save

第二步:在使用barcode的页面引入

import JsBarcode from ‘jsbarcode‘

 第三步:添加二维码容器, img/svg/canvas 三个选一即可

 
<svg id="barcode"></svg>
 <canvas id="canvas"></canvas>
 <img id="barcode"/><div @click="printPreview(1)">打印</div>

 

第四步:调用构造函数,生成条形码

JsBarcode("#barcode", "123244335435232", {
   format: "CODE128", //选择要使用的条形码类型
   width: 3, //设置条之间的宽度
   height: 100, //高度
   displayValue: true, //是否在条形码下方显示文字
   // text: "asd  2012101 血常规", //覆盖显示的文本
   fontOptions: "bold italic", //使文字加粗体或变斜体
   font: "fantasy", //设置文本的字体
   // textAlign: "left", //设置文本的水平对齐方式
   // textPosition: "top", //设置文本的垂直位置
   textMargin: 5, //设置条形码和文本之间的间距
   fontSize: 15, //设置文本的大小
   // background: "#eee", //设置条形码的背景
   lineColor: "#000", //设置条和文本的颜色。
   margin: 10, //设置条形码周围的空白边距
 });

第五步:引用lodop

导入三个文件doPrint.js lodop.js lodopFuncs.js

第六步:在页面引入getLodop函数

import { getLodop } from "../../utils/LodopFuncs";
 ?
 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, "12313"); //增加纯文本项
     LODOP.SET_PRINT_PAGESIZE(0, 400, 300, ""); //设定纸张大小
     LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "30%"); //设置缩放
     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(20, 20, 200, 200, body); //增加超文本项
   },

 在vue项目中使用lodop打印功能---条形码打印案例

在vue项目中使用lodop打印功能---条形码打印案例

上一篇:CentOS 8 Stream 简单的网络配置


下一篇:MDK keil STM32 头文件存在,编译器找不到 No such file or directory