标签打印

src/utils/print-js/function.js

@@ -0,0 +1,17 @@
+export function hexStringToByteArray (hexString) {
+  let byteArray = []
+  for (let i = 0; i < hexString.length; i += 2) {
+    let byte = parseInt(hexString.substr(i, 2), 16)
+    byteArray.push(byte)
+  }
+  return byteArray
+}
+export function getDataView (value) {
+  let uint8Buf = Array.from(value)
+  var encodedCmds = new ArrayBuffer(uint8Buf.length)
+  var dataView = new DataView(encodedCmds)
+  for (var j = 0; j < uint8Buf.length; j++) {
+    dataView.setUint8(j, uint8Buf[j])
+  }
+  return encodedCmds
+}

src/utils/print-js/tsc.js

@@ -0,0 +1,224 @@
+import encodeToGb2312 from '@/utils/print-js/encodeToGb2312.min'
+import {hexStringToByteArray} from '@/utils/print-js/function'
+
+export function createNew () {
+  var jpPrinter = {}
+  var data = ''
+  var command = []
+
+  jpPrinter.name = '标签模式'
+
+  jpPrinter.init = function () { }
+
+  jpPrinter.addCommand = function (content) {  // 将指令转成数组装起
+    let printData = encodeToGb2312(content)
+    let code = hexStringToByteArray(printData)
+    for (var i = 0; i < code.length; ++i) {
+      command.push(code[i])
+    }
+  }
+
+  /*
+   设置标签大小
+   pageWidght 标签宽度(单位毫米)
+   pageHeight 标签高度(单位毫米)
+  */
+  jpPrinter.setSize = function (pageWidght, pageHeight) {
+    data = 'SIZE ' + pageWidght.toString() + ' mm' + ',' + pageHeight.toString() + ' mm' + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+    // 设置打印速度
+    // printSpeed 速度值(范围1-6)
+  jpPrinter.setSpeed = function (printSpeed) {
+    data = 'SPEED ' + printSpeed.toString() + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setDensity = function (printDensity) { // 设置打印机浓度
+    data = 'DENSITY ' + printDensity.toString() + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setGap = function (printGap) { // 传感器
+    data = 'GAP ' + printGap.toString() + ' mm\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setCountry = function (country) { // 选择国际字符集
+      /*
+      001:USA
+      002:French
+      003:Latin America
+      034:Spanish
+      039:Italian
+      044:United Kingdom
+      046:Swedish
+      047:Norwegian
+      049:German
+       */
+    data = 'COUNTRY ' + country + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setCodepage = function (codepage) { // 选择国际代码页
+      /*
+      8-bit codepage 字符集代表
+      437:United States
+      850:Multilingual
+      852:Slavic
+      860:Portuguese
+      863:Canadian/French
+      865:Nordic
+      Windows code page
+      1250:Central Europe
+      1252:Latin I
+      1253:Greek
+      1254:Turkish
+      以下代码页仅限于 12×24 dot 英数字体
+      WestEurope:WestEurope
+      Greek:Greek
+      Hebrew:Hebrew
+      EastEurope:EastEurope
+      Iran:Iran
+      IranII:IranII
+      Latvian:Latvian
+      Arabic:Arabic
+      Vietnam:Vietnam
+      Uygur:Uygur
+      Thai:Thai
+      1252:Latin I
+      1257:WPC1257
+      1251:WPC1251
+      866:Cyrillic
+      858:PC858
+      747:PC747
+      864:PC864
+      1001:PC100
+      */
+    data = 'CODEPAGE ' + codepage + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setCls = function () { // 清除打印机缓存
+    data = 'CLS' + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setFeed = function (feed) { // 将纸向前推出n
+    data = 'FEED ' + feed + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setBackFeed = function (backup) { // 将纸向后回拉n
+    data = 'BACKFEED ' + backup + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setDirection = function (direction) { // 设置打印方向，参考编程手册
+    data = 'DIRECTION ' + direction + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setReference = function (x, y) { // 设置坐标原点，与打印方向有关
+    data = 'REFERENCE ' + x + ',' + y + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setFromfeed = function () { // 根据Size进一张标签纸
+    data = 'FORMFEED \r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setHome = function () { // 根据Size找到下一张标签纸的位置
+    data = 'HOME \r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setSound = function (level, interval) { // 控制蜂鸣器
+    data = 'SOUND ' + level + ',' + interval + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setLimitfeed = function (limit) { // 检测垂直间距
+    data = 'LIMITFEED ' + limit + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setBar = function (x, y, width, height) { // 绘制线条
+    data = 'BAR ' + x + ',' + y + ',' + width + ',' + height + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setBox = function (x_start, y_start, x_end, y_end, thickness) { // 绘制方框
+    data = 'BOX ' + x_start + ',' + y_start + ',' + x_end + ',' + y_end + ',' + thickness + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setErase = function (x_start, y_start, x_width, y_height) { // 清除指定区域的数据
+    data = 'ERASE ' + x_start + ',' + y_start + ',' + x_width + ',' + y_height + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setReverse = function (x_start, y_start, x_width, y_height) { // 将指定的区域反相打印
+    data = 'REVERSE ' + x_start + ',' + y_start + ',' + x_width + ',' + y_height + '\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setText = function (x, y, font, x_, y_, str) { // 打印文字
+    data = 'TEXT ' + x + ',' + y + ',"' + font + '",' + 0 + ',' + x_ + ',' + y_ + ',' + '"' + str + '"\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setQR = function (x, y, level, width, mode, content) { // 打印二维码
+    data = 'QRCODE ' + x + ',' + y + ',' + level + ',' + width + ',' + mode + ',' + 0 + ',"' + content + '"\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setBar = function (x, y, codetype, height, readable, narrow, wide, content) { // 打印条形码
+    data = 'BARCODE ' + x + ',' + y + ',"' + codetype + '",' + height + ',' + readable + ',' + 0 + ',' + narrow + ',' + wide + ',"' + content + '"\r\n'
+    jpPrinter.addCommand(data)
+  }
+
+  jpPrinter.setBitmap = function (x, y, mode, res) {  // 添加图片，res为画布参数
+    console.log(res)
+    var width = parseInt((res.width + 7) / 8 * 8 / 8)
+    var height = res.height
+    var time = 1
+    var temp = res.data.length - width * 32
+    var pointList = []
+    console.log(width + '--' + height)
+    data = 'BITMAP ' + x + ',' + y + ',' + width + ',' + height + ',' + mode + ','
+    jpPrinter.addCommand(data)
+    for (var i = 0; i < height; ++i) {
+      console.log(temp)
+      for (var j = 0; j < width; ++j) {
+        for (var k = 0; k < 32; k += 4) {
+          if (res.data[temp] == 0 && res.data[temp + 1] == 0 && res.data[temp + 2] == 0 && res.data[temp + 3] == 0) {
+            pointList.push(1)
+          } else {
+            pointList.push(0)
+          }
+          temp += 4
+        }
+      }
+      time++
+      temp = res.data.length - width * 32 * time
+    }
+    for (var i = 0; i < pointList.length; i += 8) {
+      var p = pointList[i] * 128 + pointList[i + 1] * 64 + pointList[i + 2] * 32 + pointList[i + 3] * 16 + pointList[i + 4] * 8 + pointList[i + 5] * 4 + pointList[i + 6] * 2 + pointList[i + 7]
+      command.push(p)
+    }
+  }
+
+  jpPrinter.setPagePrint = function () { // 打印页面
+    data = 'PRINT 1,1\r\n'
+    jpPrinter.addCommand(data)
+  }
+    // 获取打印数据
+  jpPrinter.getData = function () {
+    return command
+  }
+
+  return jpPrinter
+}

src/views/modules/production/components/print-label.vue

@@ -2,25 +2,50 @@
   <div>
     <el-dialog
       title="标签打印"
-      width="50%"
+      width="40%"
       :close-on-click-modal="false"
       :visible.sync="visible">
       <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
-        <el-form-item label="名称" prop="materialName">
-          <el-input v-model="dataForm.materialName" placeholder="名称"></el-input>
-        </el-form-item>
-        <el-form-item label="图号" prop="mapNumber">
-          <el-input v-model="dataForm.mapNumber" placeholder="图号"></el-input>
-        </el-form-item>
-        <el-form-item label="规格" prop="productSpec">
-          <el-input v-model="dataForm.productSpec" placeholder="规格"></el-input>
-        </el-form-item>
-        <el-form-item label="批次" prop="materialName">
-          <el-input v-model="dataForm.materialName" placeholder="批次"></el-input>
-        </el-form-item>
-        <el-form-item label="数量" prop="cnt">
-          <el-input-number v-model="dataForm.cnt" :min="1" label="数量"></el-input-number>
-        </el-form-item>
+        <el-collapse v-model="activeNames">
+          <el-collapse-item title="物料信息：" name="1">
+            <el-form-item label="名称" prop="materialName">
+              <el-input v-model="dataForm.materialName" placeholder="名称"></el-input>
+            </el-form-item>
+            <el-form-item label="图号" prop="mapNumber">
+              <el-input v-model="dataForm.mapNumber" placeholder="图号"></el-input>
+            </el-form-item>
+            <el-form-item label="规格" prop="productSpec">
+              <el-input v-model="dataForm.productSpec" placeholder="规格"></el-input>
+            </el-form-item>
+            <el-form-item label="批次" prop="batchNumber">
+              <el-input v-model="dataForm.batchNumber" placeholder="批次"></el-input>
+            </el-form-item>
+            <el-form-item label="数量" prop="cnt">
+              <el-input-number v-model="dataForm.cnt" :min="1" label="数量"></el-input-number>
+            </el-form-item>
+          </el-collapse-item>
+          <el-collapse-item title="打印设置：" name="2">
+            <el-row>
+              <el-form-item label="通信模式">
+                <el-select v-model="conModel" placeholder="请选择通信模式" @change="modelChange">
+                  <el-option v-for="item in models" :key="item.value" :disabled="item.disabled"
+                             :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-row>
+            <el-row>
+              <el-form-item label="端口信息" v-show="isPortModel">
+                <el-col style="width: 300px">
+                  <el-input type="text" placeholder="请选择端口" :disable="true" v-model="form.selectName" readonly="true" />
+                </el-col>
+                <el-col style="width: 100px;margin-left: 20px;">
+                  <el-button type="primary" @click="choicePort">选择端口</el-button>
+                </el-col>
+              </el-form-item>
+            </el-row>
+          </el-collapse-item>
+        </el-collapse>
       </el-form>
       <span slot="footer">
         <el-button @click="onChose">取消</el-button>
@@ -31,20 +56,39 @@
 </template>
 
 <script>
+import {createNew} from '@/utils/print-js/tsc'
+import {hexStringToByteArray, getDataView} from '@/utils/print-js/function'
 export default {
   name: 'print-label',
   data () {
     return {
       visible: false,
+      activeNames: ['1', '2'],
       dataForm: { },
+      conModel: '',
+      isPortModel: true,
+      connected: false,
+      /** 网口配置 */
+      websock: null,
+      /** USB配置 */
+      webusb: null,
+      /** 串口配置 */
+      webserial: null,
+      form: {
+        selectName: '未连接',
+        socketAddr: '127.0.0.1',
+        socketPort: 8003,
+        printData: ''
+      },
+      models: [],
       dataRule: { }
     }
   },
   methods: {
     async init (row) {
-      console.log(JSON.stringify(row))
       this.visible = true
       this.dataForm = row
+      this.models.push({ 'value': 'USB', 'label': 'USB', 'disabled': false })
     },
     validateField (type) {
       this.$refs.dataForm.validateField(type)
@@ -52,12 +96,102 @@ export default {
     onChose () {
       this.visible = false
     },
+    async modelChange (value) {
+      const that = this
+      if (value === 'USB') {
+        that.isPortModel = true
+        // 添加事件监听
+        await navigator.usb.addEventListener('connect', event => {
+          // 重新连接成功
+          this.webusb = event.device
+          that.form.selectName = event.device.productName
+          that.$message.success('USB连接成功')
+          that.openWebUsb()
+        })
+        await navigator.usb.addEventListener('disconnect', event => {
+          // 断开连接成功
+          that.form.selectName = '未连接'
+          that.connected = false
+          that.$message.error('USB连接断开')
+        })
+        await navigator.usb.getDevices().then(devices => {
+          if (devices.length > 0) {
+            // 找到前面选择的一个USB
+            that.webusb = devices[0]
+            that.form.selectName = devices[0].productName
+            // 打开usb
+            that.openWebUsb()
+          }
+        })
+      } else {
+        this.isPortModel = false
+      }
+    },
+    async openWebUsb () {
+      await this.webusb.open()
+      await this.webusb.selectConfiguration(1)
+      await this.webusb.claimInterface(0)
+      console.log('USB准备就绪，可以进行读写')
+      this.connected = true
+    },
+    async choicePort () {
+      const that = this
+      if (that.conModel === 'USB') {
+        await navigator.usb.requestDevice({ filters: [] })
+          .then(usb => {
+            // 业务逻辑处理
+            that.webusb = usb
+            that.form.selectName = usb.productName
+            that.openWebUsb()
+          }).catch(error => {
+            console.error('choicePort：' + error)
+          })
+      } else {
+        that.$message.error('请选择通信模式')
+      }
+    },
+    async sendPrint () {
+      // 标签模式
+      const command = createNew()
+      // console.log(command)
+      command.setSize(43, 30)
+      command.setGap(20, 0)
+      command.setCls()
+      let start = 5
+      let len = 28
+      // command.setText(50, 10, "TSS24.BF2", 0, 0, "打印测试") // 文本
+      command.setText(50, start, 'TSS24.BF2', 0, 0, '名称:' + this.dataForm.materialName) // 文本
+      command.setText(50, start + len, 'TSS24.BF2', 0, 0, '图号:' + this.dataForm.mapNumber) // 文本
+      command.setText(50, start + 2 * len, 'TSS24.BF2', 0, 0, '规格:' + this.dataForm.productSpec) // 文本
+      command.setText(50, start + 3 * len, 'TSS24.BF2', 0, 0, '批次:' + this.dataForm.batchNumber) // 文本
+      command.setText(50, start + 4 * len, 'TSS24.BF2', 0, 0, '数量:' + this.dataForm.cnt) // 文本
+      // command.setText(50, 130, "TSS24.BF2", 0, 0, "检  字 号：101029") // 文本
+      // command.setText(50, 180, "TSS24.BF2", 0, 0, "原材料炉批号：YXL-83829") // 文本
+      // command.setText(50, 170, "TSS24.BF2", 0, 0, "备注：这是一个备注") // 文本
+      command.setBar(50, start + 5 * len, '128', 64, 1, 2, 4, '200902125410') // 二维码
+      command.setPagePrint()
+      await this.writePrintData(getDataView(command.getData()))
+    },
+    async writePrintData (encodedCmds) {
+      if (this.conModel === 'USB') {
+        try {
+          await this.webusb.transferOut(
+            this.webusb.configuration.interfaces[0].alternate.endpoints.find(obj => obj.direction === 'out').endpointNumber, encodedCmds
+          )
+        } catch (error) {
+          this.$message.error('发送失败，请确认是否正常链接打印机')
+          // 如果任何操作失败，我们可以认为设备连接可能存在问题
+          console.error('sendPrint：', error)
+        }
+      }
+      this.$message.success('发送打印成功')
+    },
     // 表单提交
     dataFormSubmit () {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           // 打印
-          // todo
+          this.sendPrint()
           this.onChose()
         }
       })