第一步:安装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); //增加超文本项 },