vue JsBarcode的使用

JsBarcode是什么

JsBarcode是一个用于生成条形码的js库，支持浏览器和node.js，浏览器端使用不依赖于其他库。

使用步骤

1、引入JsBarcode 的js库：

JsBarcode v3.11.0下载地址

<script src="JsBarcode.all.min.js"></script>

2、页面创建存放条形码容器：

（页面允许的条形码容器有三种：canvas、svg、img）

<canvas id="canvas"></canvas>
<img id="barcode"/>
<svg id="barcode"></svg>

3、调用JsBarcode的方法生成条形码：

//生成 Hi! 内容的条形码
//第一个参数是条形码容器的选择器，第二个参数是要条形码的文本
JsBarcode("#barcode", "Hi!");

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

vue JsBarcode的使用相关推荐

vue JsBarcode 常用参数设置
jsbarcode是一个不依赖任何库/框架的条形码生成库,使用原生JavaScript写成. 安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import ...
VUE中：printJS使用，附带JsBarcode条码生成器，网页转图片html2canvas，base64上传保存处理，二维码生成库qrcode，二维码/条码扫描识别，domtoimage
官网 JsBarcode官网 JsBarcode的GitHub-WIKI 我的项目需求只需要将配置好的HTML与CSS样式传入进去就好,较为简单. 九个月后html2canvas出现线上问题设置了跨 ...
vue 条形码--JsBarcode
介绍一下在GitHub生成条形码的js插件→JsBarcode npm install jsbarcode npm install canvas var JsBarcode = require('js ...
vue 项目中生成条形码（jsbarcode）
条形码插件介绍和使用安装: cnpm install jsbarcode --save 引入:在要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode' 3.二 ...
vue中生成条形码(jsbarcode)、二维码(qrcodejs2)
1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode ...
vue生成条形码和二维码并打印
文章目录前言一.生成条形码二.生成二维码三.效果图四.打印前言最近有一个需求,需要将产品信息生成标签,每个信息生成一个条形码,拿到所有数据生成二维码,最后打印标签. 一.生成条形码使用 ...
vue3.0 + JsBarcode 循环生成多个条形码(setup语法糖)
1.安装jsbarcode npm install jsbarcode --save 2.html页面循环数据 //id动态绑定,使用类名加index <div class='js_barcod ...
vue打印问题（分页打印、批量打印条形码）
前言项目需求打印功能所遇到的问题.在此记录,望能帮到你一下问题: 当内容超过一页时不会自动分页? 当使用vue3-barcode 打印条形码时,不能批量打印? 基础打印安装官网地址:https ...
vue实现打印条码功能
需求:打印条码分为两步:一个是打印功能,一个是生成条码功能一.打印功能 vue-print-nb:这个插件使用起来便捷,用法如下: 1.安装 npm install vue-print-nb -- ...
vue生成code128条码
VUE生成code128条码 1.先下载插件 npm i jsbarcode 2.生成条码 <template><div style="width: 66%;margin: ...

vue JsBarcode的使用

JsBarcode是什么

使用步骤

vue JsBarcode的使用相关推荐

最新文章

热门文章