|
|
@@ -1,1000 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="u-barcode" v-if="calcSizeDone">
|
|
|
- <canvas
|
|
|
- v-if="showCanvas && !error"
|
|
|
- :id="canvasId"
|
|
|
- :canvas-id="canvasId"
|
|
|
- :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
|
|
- ></canvas>
|
|
|
- <image
|
|
|
- v-else-if="!showCanvas && !error"
|
|
|
- :src="barcodeImage"
|
|
|
- :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
|
|
- mode="aspectFit"
|
|
|
- />
|
|
|
- <view
|
|
|
- v-else
|
|
|
- class="error-container"
|
|
|
- :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
|
|
- >
|
|
|
- <text class="error-text">{{ error }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { nextTick } from 'vue'
|
|
|
-import { t } from '../../libs/i18n'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'u-barcode',
|
|
|
- props: {
|
|
|
- // 条码值
|
|
|
- value: {
|
|
|
- type: [String, Number],
|
|
|
- required: true
|
|
|
- },
|
|
|
- // 条码格式
|
|
|
- format: {
|
|
|
- type: String,
|
|
|
- default: 'auto',
|
|
|
- validator: function (value) {
|
|
|
- return [
|
|
|
- 'auto',
|
|
|
- 'CODE128', 'CODE128A', 'CODE128B', 'CODE128C',
|
|
|
- 'EAN13', 'EAN8', 'EAN5', 'EAN2',
|
|
|
- 'UPC', 'UPCA', 'UPCE',
|
|
|
- 'CODE39',
|
|
|
- 'ITF', 'ITF14',
|
|
|
- 'MSI', 'MSI10', 'MSI11', 'MSI1010', 'MSI1110',
|
|
|
- 'pharmacode',
|
|
|
- 'codabar'
|
|
|
- ].includes(value)
|
|
|
- }
|
|
|
- },
|
|
|
- // 宽度
|
|
|
- width: {
|
|
|
- type: Number,
|
|
|
- default: 200
|
|
|
- },
|
|
|
- // 高度
|
|
|
- height: {
|
|
|
- type: Number,
|
|
|
- default: 80
|
|
|
- },
|
|
|
- // 是否显示文本
|
|
|
- displayValue: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 文本内容
|
|
|
- text: {
|
|
|
- type: String,
|
|
|
- default: undefined
|
|
|
- },
|
|
|
- // 字体选项
|
|
|
- fontOptions: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- // 字体
|
|
|
- font: {
|
|
|
- type: String,
|
|
|
- default: 'monospace'
|
|
|
- },
|
|
|
- // 文本对齐方式
|
|
|
- textAlign: {
|
|
|
- type: String,
|
|
|
- default: 'center'
|
|
|
- },
|
|
|
- // 文本位置
|
|
|
- textPosition: {
|
|
|
- type: String,
|
|
|
- default: 'bottom'
|
|
|
- },
|
|
|
- // 文本边距
|
|
|
- textMargin: {
|
|
|
- type: Number,
|
|
|
- default: 2
|
|
|
- },
|
|
|
- // 字体大小
|
|
|
- fontSize: {
|
|
|
- type: Number,
|
|
|
- default: 14
|
|
|
- },
|
|
|
- // 背景色
|
|
|
- background: {
|
|
|
- type: String,
|
|
|
- default: '#ffffff'
|
|
|
- },
|
|
|
- // 条码颜色
|
|
|
- lineColor: {
|
|
|
- type: String,
|
|
|
- default: '#000000'
|
|
|
- },
|
|
|
- // 边距
|
|
|
- margin: {
|
|
|
- type: Number,
|
|
|
- default: 10
|
|
|
- },
|
|
|
- // 上边距
|
|
|
- marginTop: {
|
|
|
- type: Number,
|
|
|
- default: undefined
|
|
|
- },
|
|
|
- // 下边距
|
|
|
- marginBottom: {
|
|
|
- type: Number,
|
|
|
- default: undefined
|
|
|
- },
|
|
|
- // 左边距
|
|
|
- marginLeft: {
|
|
|
- type: Number,
|
|
|
- default: undefined
|
|
|
- },
|
|
|
- // 右边距
|
|
|
- marginRight: {
|
|
|
- type: Number,
|
|
|
- default: undefined
|
|
|
- },
|
|
|
- // 使用canvas还是生成图片
|
|
|
- useCanvas: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- canvasId: 'barcode-' + Math.random().toString(36).substr(2, 9),
|
|
|
- barcodeImage: '',
|
|
|
- showCanvas: false,
|
|
|
- canvasWidth: 0,
|
|
|
- canvasHeight: 0,
|
|
|
- calcSizeDone: false,
|
|
|
- error: ''
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- value() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- format() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- width() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- height() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- displayValue() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- text() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- font() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- textAlign() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- textPosition() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- textMargin() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- fontSize() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- background() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- lineColor() {
|
|
|
- this.generateBarcode()
|
|
|
- },
|
|
|
- margin() {
|
|
|
- this.generateBarcode()
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- /**
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- */
|
|
|
- this.$nextTick(() => {
|
|
|
- this.generateBarcode()
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 生成条形码
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String|Number} value - 条码值
|
|
|
- * @param {Object} options - 条码配置选项
|
|
|
- */
|
|
|
- generateBarcode() {
|
|
|
- // 统一处理默认值
|
|
|
- const margin = this.margin
|
|
|
- const options = {
|
|
|
- format: this.format || 'auto',
|
|
|
- width: this.width,
|
|
|
- height: this.height,
|
|
|
- displayValue: this.displayValue,
|
|
|
- text: this.text,
|
|
|
- fontOptions: this.fontOptions || '',
|
|
|
- font: this.font || 'monospace',
|
|
|
- textAlign: this.textAlign || 'center',
|
|
|
- textPosition: this.textPosition || 'bottom',
|
|
|
- textMargin: this.textMargin !== undefined ? this.textMargin : 2,
|
|
|
- fontSize: this.fontSize || 20,
|
|
|
- background: this.background || '#ffffff',
|
|
|
- lineColor: this.lineColor || '#000000',
|
|
|
- margin: margin,
|
|
|
- marginTop: this.marginTop !== undefined ? this.marginTop : margin,
|
|
|
- marginBottom: this.marginBottom !== undefined ? this.marginBottom : margin,
|
|
|
- marginLeft: this.marginLeft !== undefined ? this.marginLeft : margin,
|
|
|
- marginRight: this.marginRight !== undefined ? this.marginRight : margin
|
|
|
- }
|
|
|
-
|
|
|
- // 清理未定义的选项
|
|
|
- Object.keys(options).forEach(key => {
|
|
|
- if (options[key] === undefined) {
|
|
|
- delete options[key]
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- if (this.useCanvas) {
|
|
|
- // 使用canvas渲染
|
|
|
- this.showCanvas = true
|
|
|
- this.$nextTick(() => {
|
|
|
- this.renderToCanvas(options)
|
|
|
- })
|
|
|
- } else {
|
|
|
- // 生成图片
|
|
|
- this.showCanvas = false
|
|
|
- this.renderToImage(options)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 渲染条形码到canvas
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {Object} options - 条码配置选项
|
|
|
- */
|
|
|
- async renderToCanvas(options) {
|
|
|
- try {
|
|
|
- // 计算canvas尺寸
|
|
|
- this.calculateCanvasSize(options)
|
|
|
-
|
|
|
- await nextTick()
|
|
|
-
|
|
|
- // 获取canvas上下文
|
|
|
- const ctx = uni.createCanvasContext(this.canvasId, this)
|
|
|
-
|
|
|
- // 清空画布
|
|
|
- ctx.setFillStyle(options.background)
|
|
|
- ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
|
|
|
-
|
|
|
- // 生成条形码数据
|
|
|
- const barcodeData = this.encodeBarcode(this.value, options.format)
|
|
|
-
|
|
|
- if (barcodeData) {
|
|
|
- // 绘制条形码
|
|
|
- this.drawBarcode(ctx, barcodeData, options)
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制到canvas
|
|
|
- ctx.draw(false, () => {
|
|
|
- // 绘制完成回调
|
|
|
- this.$emit('rendered', { type: 'canvas', id: this.canvasId })
|
|
|
- })
|
|
|
- } catch (error) {
|
|
|
- console.error('生成条码失败:', error)
|
|
|
- this.error = error.message || t('up.barcode.error')
|
|
|
- this.$emit('error', error)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 渲染条形码为图片
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {Object} options - 条码配置选项
|
|
|
- */
|
|
|
- renderToImage(options) {
|
|
|
- try {
|
|
|
- // 计算canvas尺寸
|
|
|
- this.calculateCanvasSize(options)
|
|
|
-
|
|
|
- // 创建临时canvas用于生成图片
|
|
|
- const tempCanvasId = 'temp-' + this.canvasId
|
|
|
- const ctx = uni.createCanvasContext(tempCanvasId, this)
|
|
|
-
|
|
|
- // 清空画布
|
|
|
- ctx.setFillStyle(options.background)
|
|
|
- ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
|
|
|
-
|
|
|
- // 生成条形码数据
|
|
|
- const barcodeData = this.encodeBarcode(this.value, options.format)
|
|
|
-
|
|
|
- if (barcodeData) {
|
|
|
- // 绘制条形码
|
|
|
- this.drawBarcode(ctx, barcodeData, options)
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制到临时canvas并生成图片
|
|
|
- ctx.draw(false, () => {
|
|
|
- // 延迟一小段时间确保canvas绘制完成
|
|
|
- setTimeout(() => {
|
|
|
- // 将canvas转换为图片
|
|
|
- uni.canvasToTempFilePath({
|
|
|
- canvasId: tempCanvasId,
|
|
|
- success: (res) => {
|
|
|
- this.barcodeImage = res.tempFilePath
|
|
|
- this.$emit('rendered', { type: 'image', value: this.value, path: res.tempFilePath })
|
|
|
- },
|
|
|
- fail: (error) => {
|
|
|
- console.error('生成条码图片失败:', error)
|
|
|
- this.$emit('error', error)
|
|
|
- }
|
|
|
- }, this)
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- } catch (error) {
|
|
|
- console.error('生成条码图片失败:', error)
|
|
|
- this.$emit('error', error)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 计算canvas尺寸
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {Object} options - 条码配置选项
|
|
|
- */
|
|
|
- calculateCanvasSize(options) {
|
|
|
- // 基础宽度计算
|
|
|
- let width = options.width
|
|
|
- let height = options.height
|
|
|
-
|
|
|
- // 考虑边距
|
|
|
- const marginLeft = options.marginLeft
|
|
|
- const marginRight = options.marginRight
|
|
|
- const marginTop = options.marginTop
|
|
|
- const marginBottom = options.marginBottom
|
|
|
-
|
|
|
- // 考虑文本高度
|
|
|
- let textHeight = 0
|
|
|
- if (options.displayValue !== false) {
|
|
|
- textHeight = options.fontSize + options.textMargin
|
|
|
- }
|
|
|
-
|
|
|
- // 根据文本位置调整高度
|
|
|
- if (options.textPosition === 'top' || options.textPosition === 'bottom') {
|
|
|
- height += textHeight
|
|
|
- }
|
|
|
-
|
|
|
- // 添加边距
|
|
|
- width += marginLeft + marginRight
|
|
|
- height += marginTop + marginBottom
|
|
|
-
|
|
|
- this.canvasWidth = Math.max(width, 100)
|
|
|
- this.canvasHeight = Math.max(height, 60 + textHeight)
|
|
|
-
|
|
|
- this.calcSizeDone = true
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 编码条形码数据
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String|Number} value - 条码值
|
|
|
- * @param {String} format - 条码格式
|
|
|
- * @returns {String|null} 条形码编码数据
|
|
|
- */
|
|
|
- encodeBarcode(value, format) {
|
|
|
- try {
|
|
|
- switch (format) {
|
|
|
- case 'CODE128':
|
|
|
- case 'auto':
|
|
|
- return this.encodeCode128(value)
|
|
|
- case 'CODE39':
|
|
|
- return this.encodeCode39(value)
|
|
|
- case 'EAN13':
|
|
|
- return this.encodeEAN13(value)
|
|
|
- case 'EAN8':
|
|
|
- return this.encodeEAN8(value)
|
|
|
- case 'EAN5':
|
|
|
- case 'EAN2':
|
|
|
- return this.encodeEAN52(value, format)
|
|
|
- case 'UPC':
|
|
|
- case 'UPCA':
|
|
|
- return this.encodeUPCA(value)
|
|
|
- case 'UPCE':
|
|
|
- return this.encodeUPCE(value)
|
|
|
- default:
|
|
|
- // 默认使用CODE128
|
|
|
- return this.encodeCode128(value)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('条码编码失败:', error)
|
|
|
- throw error
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 添加右侧安静区(至少2个模块宽度的空白)
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 要编码的数据
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeCode128(data) {
|
|
|
- const CODE128_START_CODE_B = 104
|
|
|
- const CODE128_STOP = 106
|
|
|
-
|
|
|
- // CODE128 Code B 字符集
|
|
|
- const CODE128_CODE_B_CHARS = ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~'
|
|
|
-
|
|
|
- // 条形码模式 (B 模式)
|
|
|
- const codes = []
|
|
|
- let checksum = CODE128_START_CODE_B
|
|
|
-
|
|
|
- // 添加起始字符
|
|
|
- codes.push(CODE128_START_CODE_B)
|
|
|
-
|
|
|
- // 编码每个字符
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- const char = data[i]
|
|
|
- const code = CODE128_CODE_B_CHARS.indexOf(char)
|
|
|
-
|
|
|
- if (code === -1) {
|
|
|
- throw new Error('Invalid character in CODE128: ' + char)
|
|
|
- }
|
|
|
-
|
|
|
- codes.push(code)
|
|
|
- checksum += code * (i + 1)
|
|
|
- }
|
|
|
-
|
|
|
- // 添加校验字符
|
|
|
- codes.push(checksum % 103)
|
|
|
-
|
|
|
- // 添加结束字符
|
|
|
- codes.push(CODE128_STOP)
|
|
|
-
|
|
|
- // 转换为条形码模式 (1 = 黑条, 0 = 白条)
|
|
|
- let barcode = ''
|
|
|
- for (let i = 0; i < codes.length; i++) {
|
|
|
- const code = codes[i]
|
|
|
- barcode += this.getCode128Pattern(code)
|
|
|
- }
|
|
|
-
|
|
|
- // 添加右侧安静区(至少2个模块宽度的空白)
|
|
|
- barcode += '00000'
|
|
|
-
|
|
|
- return barcode
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取CODE128编码模式
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {Number} code - 字符编码
|
|
|
- * @returns {String} 条形码二进制模式
|
|
|
- */
|
|
|
- getCode128Pattern(code) {
|
|
|
- // CODE128编码表
|
|
|
- const patterns = [
|
|
|
- "11011001100", "11001101100", "11001100110", "10010011000",
|
|
|
- "10010001100", "10001001100", "10011001000", "10011000100",
|
|
|
- "10001100100", "11001001000", "11001000100", "11000100100",
|
|
|
- "10110011100", "10011011100", "10011001110", "10111001100",
|
|
|
- "10011101100", "10011100110", "11001110010", "11001011100",
|
|
|
- "11001001110", "11011100100", "11001110100", "11101101110",
|
|
|
- "11101001100", "11100101100", "11100100110", "11101100100",
|
|
|
- "11100110100", "11100110010", "11011011000", "11011000110",
|
|
|
- "11000110110", "10100011000", "10001011000", "10001000110",
|
|
|
- "10110001000", "10001101000", "10001100010", "11010001000",
|
|
|
- "11000101000", "11000100010", "10110111000", "10110001110",
|
|
|
- "10001101110", "10111011000", "10111000110", "10001110110",
|
|
|
- "11101110110", "11010001110", "11000101110", "11011101000",
|
|
|
- "11011100010", "11011101110", "11101011000", "11101000110",
|
|
|
- "11100010110", "11101101000", "11101100010", "11100011010",
|
|
|
- "11101111010", "11001000010", "11110001010", "10100110000",
|
|
|
- "10100001100", "10010110000", "10010000110", "10000101100",
|
|
|
- "10000100110", "10110010000", "10110000100", "10011010000",
|
|
|
- "10011000010", "10000110100", "10000110010", "11000010010",
|
|
|
- "11001010000", "11110111010", "11000010100", "10001111010",
|
|
|
- "10100111100", "10010111100", "10010011110", "10111100100",
|
|
|
- "10011110100", "10011110010", "11110100100", "11110010100",
|
|
|
- "11110010010", "11011011110", "11011110110", "11110110110",
|
|
|
- "10101111000", "10100011110", "10001011110", "10111101000",
|
|
|
- "10111100010", "11110101000", "11110100010", "10111011110",
|
|
|
- "10111101110", "11101011110", "11110101110", "11010000100",
|
|
|
- "11010010000", "11010011100", "11000111010"
|
|
|
- ];
|
|
|
-
|
|
|
- return patterns[code] || "";
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * CODE39编码实现
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 要编码的数据
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeCode39(data) {
|
|
|
- const codes = {
|
|
|
- '0': '101000111011101',
|
|
|
- '1': '111010001010111',
|
|
|
- '2': '101110001010111',
|
|
|
- '3': '111011100010101',
|
|
|
- '4': '101000111010111',
|
|
|
- '5': '111010001110101',
|
|
|
- '6': '101110001110101',
|
|
|
- '7': '101000101110111',
|
|
|
- '8': '111010001011101',
|
|
|
- '9': '101110001011101',
|
|
|
- 'A': '111010100010111',
|
|
|
- 'B': '101110100010111',
|
|
|
- 'C': '111011101000101',
|
|
|
- 'D': '101011100010111',
|
|
|
- 'E': '111010111000101',
|
|
|
- 'F': '101110111000101',
|
|
|
- 'G': '101010001110111',
|
|
|
- 'H': '111010100011101',
|
|
|
- 'I': '101110100011101',
|
|
|
- 'J': '101011100011101',
|
|
|
- 'K': '111010101000111',
|
|
|
- 'L': '101110101000111',
|
|
|
- 'M': '111011101010001',
|
|
|
- 'N': '101011101000111',
|
|
|
- 'O': '111010111010001',
|
|
|
- 'P': '101110111010001',
|
|
|
- 'Q': '101010111000111',
|
|
|
- 'R': '111010101110001',
|
|
|
- 'S': '101110101110001',
|
|
|
- 'T': '101011101110001',
|
|
|
- 'U': '111000101010111',
|
|
|
- 'V': '100011101010111',
|
|
|
- 'W': '111000111010101',
|
|
|
- 'X': '100010111010111',
|
|
|
- 'Y': '111000101110101',
|
|
|
- 'Z': '100011101110101',
|
|
|
- '-': '100010101110111',
|
|
|
- '.': '111000101011101',
|
|
|
- ' ': '100011101011101',
|
|
|
- '*': '100010111011101', // 起始和终止字符
|
|
|
- '$': '100010001000101',
|
|
|
- '/': '100010001010001',
|
|
|
- '+': '100010100010001',
|
|
|
- '%': '101000100010001'
|
|
|
- }
|
|
|
-
|
|
|
- // 转为大写
|
|
|
- data = data.toUpperCase()
|
|
|
-
|
|
|
- // 添加起始和终止字符
|
|
|
- let barcode = codes['*']
|
|
|
-
|
|
|
- // 添加数据字符
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- const char = data[i]
|
|
|
- if (codes[char]) {
|
|
|
- barcode += '0' // 字符间隔
|
|
|
- barcode += codes[char]
|
|
|
- } else {
|
|
|
- throw new Error('Invalid character in CODE39: ' + char)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加终止字符
|
|
|
- barcode += '0' // 字符间隔
|
|
|
- barcode += codes['*']
|
|
|
-
|
|
|
- return barcode
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * EAN13编码实现
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 13位数字字符串
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeEAN13(data) {
|
|
|
- // 确保数据是13位数字
|
|
|
- if (!/^\d{13}$/.test(data)) {
|
|
|
- throw new Error('EAN13 must be 13 digits')
|
|
|
- }
|
|
|
-
|
|
|
- // 验证校验位
|
|
|
- let sum = 0
|
|
|
- for (let i = 0; i < 12; i++) {
|
|
|
- const digit = parseInt(data[i])
|
|
|
- sum += (i % 2 === 0) ? digit : digit * 3
|
|
|
- }
|
|
|
- const checkDigit = (10 - (sum % 10)) % 10
|
|
|
- if (parseInt(data[12]) !== checkDigit) {
|
|
|
- throw new Error('Invalid EAN13 check digit')
|
|
|
- }
|
|
|
-
|
|
|
- // 左侧数据
|
|
|
- const leftData = data.substring(1, 7)
|
|
|
- const rightData = data.substring(7, 13)
|
|
|
-
|
|
|
- // 起始符
|
|
|
- let barcode = '101'
|
|
|
-
|
|
|
- // 左侧数据编码 (根据第一位数字决定编码方式)
|
|
|
- const firstDigit = parseInt(data[0])
|
|
|
- const leftPatterns = [
|
|
|
- ['LLLLLL', 'LLGLGG', 'LLGGLG', 'LLGGGL', 'LGLLGG',
|
|
|
- 'LGGLLG', 'LGGGLL', 'LGLGLG', 'LGLGGL', 'LGGLGL']
|
|
|
- ]
|
|
|
-
|
|
|
- const pattern = leftPatterns[0][firstDigit]
|
|
|
-
|
|
|
- // 左侧奇偶编码模式
|
|
|
- const leftOdd = [
|
|
|
- '0001101', '0011001', '0010011', '0111101', '0100011',
|
|
|
- '0110001', '0101111', '0111011', '0110111', '0001011'
|
|
|
- ]
|
|
|
-
|
|
|
- const leftEven = [
|
|
|
- '0100111', '0110011', '0011011', '0100001', '0011101',
|
|
|
- '0111001', '0000101', '0010001', '0001001', '0010111'
|
|
|
- ]
|
|
|
-
|
|
|
- // 编码左侧数据
|
|
|
- for (let i = 0; i < leftData.length; i++) {
|
|
|
- const digit = parseInt(leftData[i])
|
|
|
- if (pattern[i] === 'L') {
|
|
|
- barcode += leftOdd[digit]
|
|
|
- } else {
|
|
|
- barcode += leftEven[digit]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 中间分隔符
|
|
|
- barcode += '01010'
|
|
|
-
|
|
|
- // 右侧数据编码 (始终使用右编码)
|
|
|
- const rightCodes = [
|
|
|
- '1110010', '1100110', '1101100', '1000010', '1011100',
|
|
|
- '1001110', '1010000', '1000100', '1001000', '1110100'
|
|
|
- ]
|
|
|
-
|
|
|
- for (let i = 0; i < rightData.length; i++) {
|
|
|
- const digit = parseInt(rightData[i])
|
|
|
- barcode += rightCodes[digit]
|
|
|
- }
|
|
|
-
|
|
|
- // 结束符
|
|
|
- barcode += '101'
|
|
|
-
|
|
|
- return barcode
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * EAN8编码实现
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 8位数字字符串
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeEAN8(data) {
|
|
|
- // 确保数据是8位数字
|
|
|
- if (!/^\d{8}$/.test(data)) {
|
|
|
- throw new Error('EAN8 must be 8 digits')
|
|
|
- }
|
|
|
-
|
|
|
- // 验证校验位
|
|
|
- let sum = 0
|
|
|
- for (let i = 0; i < 7; i++) {
|
|
|
- const digit = parseInt(data[i])
|
|
|
- sum += digit * (i % 2 === 0 ? 3 : 1)
|
|
|
- }
|
|
|
- const checkDigit = (10 - (sum % 10)) % 10
|
|
|
- if (parseInt(data[7]) !== checkDigit) {
|
|
|
- throw new Error('Invalid EAN8 check digit')
|
|
|
- }
|
|
|
-
|
|
|
- // 左侧数据(4位)
|
|
|
- const leftData = data.substring(0, 4)
|
|
|
- // 右侧数据(4位)
|
|
|
- const rightData = data.substring(4, 8)
|
|
|
-
|
|
|
- // 起始符
|
|
|
- let barcode = '101'
|
|
|
-
|
|
|
- // 左侧奇偶编码模式
|
|
|
- const leftOdd = [
|
|
|
- '0001101', '0011001', '0010011', '0111101', '0100011',
|
|
|
- '0110001', '0101111', '0111011', '0110111', '0001011'
|
|
|
- ]
|
|
|
-
|
|
|
- // 编码左侧数据
|
|
|
- for (let i = 0; i < leftData.length; i++) {
|
|
|
- const digit = parseInt(leftData[i])
|
|
|
- barcode += leftOdd[digit]
|
|
|
- }
|
|
|
-
|
|
|
- // 中间分隔符
|
|
|
- barcode += '01010'
|
|
|
-
|
|
|
- // 右侧数据编码 (始终使用右编码)
|
|
|
- const rightCodes = [
|
|
|
- '1110010', '1100110', '1101100', '1000010', '1011100',
|
|
|
- '1001110', '1010000', '1000100', '1001000', '1110100'
|
|
|
- ]
|
|
|
-
|
|
|
- // 编码右侧数据
|
|
|
- for (let i = 0; i < rightData.length; i++) {
|
|
|
- const digit = parseInt(rightData[i])
|
|
|
- barcode += rightCodes[digit]
|
|
|
- }
|
|
|
-
|
|
|
- // 结束符
|
|
|
- barcode += '101'
|
|
|
-
|
|
|
- return barcode
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * EAN5/EAN2编码实现
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 2位或5位数字字符串
|
|
|
- * @param {String} format - 格式类型(EAN5或EAN2)
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeEAN52(data, format) {
|
|
|
- const length = format === 'EAN5' ? 5 : 2
|
|
|
- // 确保数据是相应位数的数字
|
|
|
- if (!new RegExp(`^\\d{${length}}$`).test(data)) {
|
|
|
- throw new Error(`${format} must be ${length} digits`)
|
|
|
- }
|
|
|
-
|
|
|
- // EAN5/2编码表
|
|
|
- const codes = [
|
|
|
- '0001101', '0011001', '0010011', '0111101', '0100011',
|
|
|
- '0110001', '0101111', '0111011', '0110111', '0001011'
|
|
|
- ]
|
|
|
-
|
|
|
- // 计算校验和
|
|
|
- let checksum = 0
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- checksum += parseInt(data[i]) * (i % 2 === 0 ? 3 : 1)
|
|
|
- }
|
|
|
-
|
|
|
- // 根据校验和确定编码模式
|
|
|
- const patterns = format === 'EAN5' ?
|
|
|
- ['00001', '00010', '00100', '01000', '10000', // 0-4
|
|
|
- '00000', '00011', '00101', '00110', '01001', // 5-9
|
|
|
- '01010', '01100', '10001', '10010', '10100', // 10-14
|
|
|
- '11000', '11001', '11010', '11100'] : // 15-18
|
|
|
- ['00', '01', '10', '11'] // EAN2只有4种模式
|
|
|
-
|
|
|
- const pattern = format === 'EAN5' ?
|
|
|
- patterns[checksum % 10] :
|
|
|
- patterns[parseInt(data) % 4]
|
|
|
-
|
|
|
- // 起始符
|
|
|
- let barcode = '1011'
|
|
|
-
|
|
|
- // 编码数据
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- // 添加分隔符(除了第一个字符)
|
|
|
- if (i > 0) {
|
|
|
- barcode += '01' // 字符间分隔符
|
|
|
- }
|
|
|
-
|
|
|
- // 根据模式确定编码方式
|
|
|
- const digit = parseInt(data[i])
|
|
|
- const code = codes[digit]
|
|
|
-
|
|
|
- barcode += code
|
|
|
- }
|
|
|
-
|
|
|
- return barcode
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * UPCA编码实现
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 11位或12位数字字符串
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeUPCA(data) {
|
|
|
- // 如果是11位,计算校验位
|
|
|
- if (/^\d{11}$/.test(data)) {
|
|
|
- let sum = 0
|
|
|
- for (let i = 0; i < 11; i++) {
|
|
|
- const digit = parseInt(data[i])
|
|
|
- sum += (i % 2 === 0) ? digit * 3 : digit
|
|
|
- }
|
|
|
- const checkDigit = (10 - (sum % 10)) % 10
|
|
|
- data += checkDigit
|
|
|
- }
|
|
|
-
|
|
|
- // 确保数据是12位数字
|
|
|
- if (!/^\d{12}$/.test(data)) {
|
|
|
- throw new Error('UPC-A must be 11 or 12 digits')
|
|
|
- }
|
|
|
-
|
|
|
- // UPCA实际上是EAN13的第一个数字为0的特殊情况
|
|
|
- return this.encodeEAN13('0' + data)
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * UPCE编码实现
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {String} data - 6位或8位数字字符串
|
|
|
- * @returns {String|null} 编码后的条形码数据
|
|
|
- */
|
|
|
- encodeUPCE(data) {
|
|
|
- // 如果是7位,计算校验位
|
|
|
- if (/^\d{7}$/.test(data)) {
|
|
|
- let sum = 0
|
|
|
- for (let i = 0; i < 7; i++) {
|
|
|
- const digit = parseInt(data[i])
|
|
|
- sum += (i % 2 === 0) ? digit * 3 : digit
|
|
|
- }
|
|
|
- const checkDigit = (10 - (sum % 10)) % 10
|
|
|
- data += checkDigit
|
|
|
- }
|
|
|
-
|
|
|
- // 确保数据是8位数字
|
|
|
- if (!/^\d{8}$/.test(data)) {
|
|
|
- throw new Error('UPC-E must be 7 or 8 digits')
|
|
|
- }
|
|
|
-
|
|
|
- // 检查是否是有效的UPC-E格式
|
|
|
- if (data[0] !== '0' && data[0] !== '1') {
|
|
|
- throw new Error('UPC-E must start with 0 or 1')
|
|
|
- }
|
|
|
-
|
|
|
- // UPCE编码表
|
|
|
- const leftOdd = [
|
|
|
- '0001101', '0011001', '0010011', '0111101', '0100011',
|
|
|
- '0110001', '0101111', '0111011', '0110111', '0001011'
|
|
|
- ]
|
|
|
-
|
|
|
- const leftEven = [
|
|
|
- '0100111', '0110011', '0011011', '0100001', '0011101',
|
|
|
- '0111001', '0000101', '0010001', '0001001', '0010111'
|
|
|
- ]
|
|
|
-
|
|
|
- // 根据系统数字确定编码模式
|
|
|
- const systemDigit = data[0]
|
|
|
- const checkDigit = data[7]
|
|
|
-
|
|
|
- // 提取中间6位
|
|
|
- const middleData = data.substring(1, 7)
|
|
|
-
|
|
|
- // 确定编码模式
|
|
|
- let pattern
|
|
|
- if (checkDigit === '0' || checkDigit === '1' || checkDigit === '2') {
|
|
|
- pattern = 'EEEEOO' // 0,1,2
|
|
|
- } else if (checkDigit === '3') {
|
|
|
- pattern = 'EEEEOO' // 3
|
|
|
- } else if (checkDigit === '4') {
|
|
|
- pattern = 'EEEOOO' // 4
|
|
|
- } else {
|
|
|
- pattern = 'EEOOOO' // 5,6,7,8,9
|
|
|
- }
|
|
|
-
|
|
|
- // 起始符
|
|
|
- let barcode = '101'
|
|
|
-
|
|
|
- // 编码中间6位数据
|
|
|
- for (let i = 0; i < middleData.length; i++) {
|
|
|
- const digit = parseInt(middleData[i])
|
|
|
- if (pattern[i] === 'E') {
|
|
|
- barcode += leftEven[digit]
|
|
|
- } else {
|
|
|
- barcode += leftOdd[digit]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 中间分隔符
|
|
|
- barcode += '010101'
|
|
|
-
|
|
|
- // 结束符
|
|
|
- barcode += '101'
|
|
|
-
|
|
|
- return barcode
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 绘制条形码
|
|
|
- * @author jry <ijry@qq.com>
|
|
|
- * @param {Object} ctx - canvas上下文
|
|
|
- * @param {String} barcodeData - 条形码数据
|
|
|
- * @param {Object} options - 条码配置选项
|
|
|
- */
|
|
|
- drawBarcode(ctx, barcodeData, options) {
|
|
|
- if (!barcodeData) return
|
|
|
-
|
|
|
- const marginLeft = options.marginLeft
|
|
|
- const marginTop = options.marginTop
|
|
|
- const marginBottom = options.marginBottom
|
|
|
- const textHeight = options.displayValue !== false ? options.fontSize + options.textMargin : 0
|
|
|
- const height = options.height
|
|
|
- // 恢复: 根据总长度计算模块宽度
|
|
|
- const moduleWidth = Math.max(1, (this.canvasWidth - marginLeft - (options.marginRight || 10)) / barcodeData.length)
|
|
|
-
|
|
|
- ctx.setFillStyle(options.lineColor)
|
|
|
-
|
|
|
- // 计算条形码绘制的Y坐标
|
|
|
- let barcodeY = marginTop
|
|
|
- // 如果文本在顶部,需要调整条形码绘制位置
|
|
|
- if (options.displayValue !== false && options.textPosition === 'top') {
|
|
|
- barcodeY += textHeight
|
|
|
- }
|
|
|
-
|
|
|
- // 恢复: 使用计算出的模块宽度绘制条形码
|
|
|
- let x = marginLeft
|
|
|
- for (let i = 0; i < barcodeData.length; i++) {
|
|
|
- if (barcodeData[i] === '1') {
|
|
|
- // 使用计算的模块宽度绘制每个条
|
|
|
- ctx.fillRect(x, barcodeY, moduleWidth, height)
|
|
|
- }
|
|
|
- // 每个条/空都占用一个模块宽度
|
|
|
- x += moduleWidth
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制文本
|
|
|
- if (options.displayValue !== false) {
|
|
|
- const text = options.text || this.value
|
|
|
- let textY
|
|
|
-
|
|
|
- ctx.setFillStyle(options.lineColor)
|
|
|
- ctx.setFontSize(options.fontSize)
|
|
|
- ctx.setTextAlign(options.textAlign)
|
|
|
-
|
|
|
- let textX
|
|
|
- switch (options.textAlign) {
|
|
|
- case 'left':
|
|
|
- textX = marginLeft
|
|
|
- break
|
|
|
- case 'right':
|
|
|
- textX = this.canvasWidth - options.marginRight
|
|
|
- break
|
|
|
- default: // center
|
|
|
- textX = this.canvasWidth / 2
|
|
|
- }
|
|
|
-
|
|
|
- // 根据文本位置确定Y坐标
|
|
|
- if (options.textPosition === 'top') {
|
|
|
- textY = marginTop + options.fontSize - 3
|
|
|
- } else { // bottom
|
|
|
- // 修复:正确计算底部文本位置,确保文本完全显示
|
|
|
- textY = barcodeY + height + options.textMargin + options.fontSize
|
|
|
- // 确保文本不会超出画布边界
|
|
|
- if (textY > this.canvasHeight - marginBottom) {
|
|
|
- textY = this.canvasHeight - marginBottom - 2
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ctx.fillText(text, textX, textY)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.u-barcode {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.error-container {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: #f0f0f0;
|
|
|
- color: #ff0000;
|
|
|
-}
|
|
|
-
|
|
|
-.error-text {
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-</style>
|