第一步：安裝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); //增加超文本項
},
