最終效果

html2canvas 文檔地址:前端插件JsBarcode生成條形碼安裝和引入
http://html2canvas.hertzen.com/documentation
github 地址:
https://github.com/niklasvh/html2canvas
//安裝cnpm install jsbarcode --save//引入import JsBarcode from 'jsbarcode'頁(yè)面容器<template><!-- 條形碼容器,可選svg、canvas,或img標(biāo)簽 --><svg id="barcode"></svg><!-- or --><canvas id="barcode"></canvas><!-- or --><img id="barcode"/></template實(shí)例化不要在DOM還未加載時(shí),調(diào)用jsbarcode庫(kù),比如create生命周期簡(jiǎn)版
JsBarcode('#barcode', 12345678,{displayValue: true // 是否在條形碼下方顯示文字})
復(fù)雜版
// 生成條形碼JsBarcode('#barcode', '12345678', {format: "CODE39",//選擇要使用的條形碼類型width:3,//設(shè)置條之間的寬度height:100,//高度displayValue:true,//是否在條形碼下方顯示文字text:"Axjy",//覆蓋顯示的文本fontOptions:"bold italic",//使文字加粗體或變斜體font:"fantasy",//設(shè)置文本的字體textAlign:"right",//設(shè)置文本的水平對(duì)齊方式textPosition:"top",//設(shè)置文本的垂直位置textMargin:5,//設(shè)置條形碼和文本之間的間距fontSize:15,//設(shè)置文本的大小background:"#eee",//設(shè)置條形碼的背景l(fā)ineColor:"#FF7F50",//設(shè)置條和文本的顏色 。margin:15//設(shè)置條形碼周圍的空白邊距})
GitHub 地址擴(kuò)展常用條形碼類型組成及說明
文檔地址
條碼生成器



結(jié)語以上主要只寫了Vue版的示例,但是兩個(gè)插件都是使用原生JavaScript寫成,不依賴任何庫(kù)/框架,所以不論是Jquery還是React都可以用
推薦閱讀
- 商標(biāo)logo免費(fèi)一鍵生成網(wǎng)站 ico圖標(biāo)在線制作有哪些
- 二維碼生成軟件有哪些 二維碼生成器在線制作
- mybatis自動(dòng)生成代碼 mybatisplus優(yōu)缺點(diǎn)
- 前端生成二維碼的插件 插件二維碼代碼展示
- 藝術(shù)簽名免費(fèi)設(shè)計(jì) 免費(fèi)簽名設(shè)計(jì)在線生成
- 生成二維碼的軟件推薦 免費(fèi)創(chuàng)意二維碼生成器
- word批量生成 word文件批量生成器
- 歌詞編輯器怎么用 自編歌詞生成歌的軟件
- 在線藝術(shù)字體生成器 在線藝術(shù)字體生成器推薦
- word圖片轉(zhuǎn)文字 掃描圖片生成word文檔
