安装

yarn add jsbarcode

使用

// HTMLElement 承载条形码的元素  svg/canvas

// text 显示在条形码下方的文字

// option  条形码的配置项 具体见【条形码的配置项】

JsBarcode(HTMLElement, text, option)

条形码的配置项

使用中的option

background: "#ffffff"  // 背景色

displayValue: true // 是否显示条形码下面的文字

font: "monospace" // 字体

fontOptions: "" // 字体相关的配置

fontSize: 20 // 字体大小 默认20

format: "CODE128" // 条形码的种类 具体见 format

height: 40 // 高度

lineColor: "#000000" // 条形码线条的颜色

margin: 8 // 条形码四种的间距 类似于div的padding

marginBottom: 8 // 下边距

marginLeft: 8 // 左边距

marginRight: 8 // 右边距

marginTop: 8 // 上边距

text: undefined

textAlign: "center" // 条形码下面的文字的对齐方式

textMargin: 2

textPosition: "bottom" // 条形码下面文字的位置

条形码的种类

条形码的配置项选项中的format的值

CODE128

    CODE128 (自动模式切换)

    CODE128 A/B/C (强制模式)

EAN

    EAN-13

    EAN-8

    EAN-5

    EAN-2

    UPC (A)

CODE39

ITF-14

MSI

    MSI10

    MSI11

    MSI1010

    MSI1110

Pharmacode

Codabar

使用jsbarcode生成条形码的更多相关文章

  1. 前端如何生成条形码---JsBarcode

    React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...

  2. 生成条形码插件 条形码--JsBarcode

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...

  3. js生成条形码——JsBarcode

    原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...

  4. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 使用js生成条形码以及二维码

    一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...

  7. js生成条形码

    生成条形码 <body> <div> <img id="ma"/> </div> </body> </html&g ...

  8. react 中使用 JsBarcode 显示条形码

    import React from 'react';import JsBarcode from 'jsbarcode'; export class RefundSheet extends React. ...

  9. C# 在Word文档中生成条形码

    C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...

  10. 使用html2canvas实现批量生成条形码

    /*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...

随机推荐

  1. 全面指南：技术写作与编辑工具 Markdown、Git 研究工具

    技术写作工具 在技术写作领域,"工具"是指技术写作者用于创建.管理和发布高质量技术文档的各种软件和应用程序.这包括文字处理器.桌面出版应用程序.XML 编辑器.内容管理系统等等.一 ...

  2. Docker学习路线7：构建容器镜像

    容器镜像是可执行的软件包,包括运行应用程序所需的所有内容:代码.运行时.系统工具.库和设置.通过构建自定义镜像,您可以在任何支持Docker的平台上无缝地部署应用程序及其所有依赖项. Dockerfi ...

  3. C# Dev GridControl小结

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  4. 我只用了3步，实现了一个逼真的3D场景渲染

    给3D模型及环境场景渲染出兼具质感和真实感的材质效果,需要经历几步? 显然,目前的3D模型材质渲染技术,还无法实现简单几步就能搞定的标准化作业来量化,完成一个质量过关的3D模型渲染,一般需要: 1.准 ...

  5. .NET MAUI开源免费的UI工具包 - Uranium

    前言 一直有小伙伴在微信公众号后台留言让我分享一下.NET MAUI相关的UI框架,今天大姚分享一个.NET MAUI开源.免费的UI工具包:Uranium. Uranium介绍 Uranium是一个 ...

  6. 挑战吧，HarmonyOS应用开发工程师

      一年一度属于工程师的专属节日1024已过,但程序员多重活动持续进行中~ 参与活动即有机会获得HUAWEI Freebuds 5i 耳机等精美礼品! 点击"阅读原文"查看更多活动 ...

  7. 重新整理 .net core 实践篇———承载[外篇]

    前言 简单介绍一下承载. 正文 名称叫做承载,其实就是.net core 定义的一套长期运行的服务的规范. 这个服务可以是web服务,也可以是其他服务,比如tcp,或者一些监控服务. 这里以监控服务为 ...

  8. maven 设置阿里镜像[二]

    前言 因为我们在国内,网速很慢,所以最好设置一下阿里镜像. 1.在maven中的conf下的setting 修改为: <mirror> <id>alimaven</id& ...

  9. apache 服务器配置常用知识点合集

    前言 因为当年周围同学都在学php,最为简单的就是学php 好就业啊,写个一些php,最后放弃了,apache也看了两眼吧.下面是我使用有记录的,没有记录的我后面会补上. 正文 域名配置 1.取消 N ...

  10. 优化搜索排序结果从而“ 提升CTR、CVR业务指标”

    简介: 搭建搜索功能不难,难的是如何提高搜索质量,帮助用户快速找到心中所想的内容或商品,那么搜索结果的相关性排序则是影响用户体验最关键的一环,本文通过阿里云开放搜索电商行业解决方案和大家聊一聊如何优化 ...