在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); //增加超文本项
},
