nuxt中使用JsBarcode插件生成条形码
JavaScipt
2023-05-28 14:02:21
条形码可以说是在生活中随处可见,被广泛使用的条形码为商品打上了独一无二的标签。那么在开发中如何生成条形码呢?
文中就基于JsBarcode插件生成条形码给出详细流程。
一、安装JsBarcode插件
npm install jsbarcode --save
二、页面中使用JsBarcode插件
2.1、引入JsBarcode插件
import JsBarcode from 'jsbarcode'
2.2、设置存放条形码的img标签
<img id="barcode" />
2.3、js中直接调用
JsBarcode('#barcode', '520-1314', {
format: 'CODE128',//选择要使用的条形码类型
width:2,//设置条之间的宽度
height:60,//高度
displayValue:true,//是否在条形码下方显示文字
// text:"456",//覆盖显示的文本
// fontOptions:"bold italic",//使文字加粗体或变斜体
// font:"fantasy",//设置文本的字体
// textAlign:"left",//设置文本的水平对齐方式
// textPosition:"top",//设置文本的垂直位置
// textMargin:5,//设置条形码和文本之间的间距
fontSize:12,//设置文本的大小
// background:"#eee",//设置条形码的背景
lineColor:"#000",//设置条和文本的颜色。
// margin:5//设置条形码周围的空白边距
})
插件说明:
JsBarcode('存放条形码Img的id', '需要生成的条形码内容,如520-1313', 关于条形码的配置,包含了颜色、尺寸等信息)
条形码的生成仅支持,常见的特殊字符或字母、数字等。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
1067人已阅读