網(wǎng)上有很多關(guān)于pos機(jī)如何操作重打小票, 使用JS隔離作通用跨平臺(tái)無線打印小票的知識(shí)，也有很多人為大家解答關(guān)于pos機(jī)如何操作重打小票的問題，今天pos機(jī)之家(www.dsth100338.com)為大家整理了關(guān)于這方面的知識(shí)，讓我們一起來看下吧!
本文目錄一覽：
pos機(jī)如何操作重打小票
各位,好久不見,這段時(shí)間事情太多了,一直沒空更新文章,sosososorry.
如果我告訴您網(wǎng)站能以安全和隱私保護(hù)的方式與附近的藍(lán)牙設(shè)備進(jìn)行通信，您會(huì)怎么想？如此一來，心率監(jiān)測(cè)器、會(huì)唱歌的燈，甚至海龜都可以直接與網(wǎng)站交互了。到目前為止，僅有部分針對(duì)特定平臺(tái)的應(yīng)用可以實(shí)現(xiàn)與藍(lán)牙設(shè)備的交互。Web Bluetooth API 旨在改變這一現(xiàn)狀，以期將此功能賦予 Web 瀏覽器。筆者所在的POS行業(yè)更是經(jīng)常用到各種藍(lán)牙小票機(jī),藍(lán)牙標(biāo)簽機(jī),如此一來整個(gè) Blazor ,app客戶端都不用了, 很是利好啊! 話不多說,開整!原文鏈接：https://www.cnblogs.com/densen2014/p/16749910.html
1. 運(yùn)行截圖演示地址 DemoSSR
連接設(shè)備
連接成功
打印標(biāo)簽
我測(cè)試這臺(tái)打印機(jī)使用cpcl語言,測(cè)試的指令是
! 10 200 200 400 1BEEP 1PW 380SETMAG 1 1CENTERTEXT 10 2 10 40 Micro BarTEXT 12 3 10 75 BlazorTEXT 10 2 10 350 eMenuB QR 30 150 M 2 U 7MA,https://google.comENDQRFORMPRINT2. 源碼大家參考開源地址,僅摘抄要點(diǎn)和寫組件使用方式
本組件主要是調(diào)用瀏覽器API實(shí)現(xiàn)基于瀏覽器的藍(lán)牙功能,現(xiàn)代桌面和安卓移動(dòng)端都支持.包括MAUI Blazor
navigator.bluetooth.requestDevice 2.1 關(guān)鍵js代碼
async function onConnect() { bluetoothDevice = null; if (opt.serviceUuid && opt.serviceUuid.toString().startsWith('0x')) { opt.serviceUuid = parseInt(opt.serviceUuid); } if (opt.characteristicUuid && opt.characteristicUuid.tostring().startsWith('0x')) { opt.characteristicUuid = parseInt(opt.characteristicUuid); } try { logII('Requesting any Bluetooth Device...'); var option = { //acceptAllDevices: true, //"filters": [{ // "namePrefix": "BMAU" //}], optionalServices: [opt.serviceUuid] } if (opt.namePrefix) option.filters = '[{ "namePrefix": "' + opt.namePrefix + '"}]'; else option.acceptAllDevices = true; bluetoothDevice = await navigator.bluetooth.requestDevice(option); bluetoothDevice.addEventListener('gattserverdisconnected', onDisconnected); await connect(); } catch (error) { logErr('Argh! ' + error); } } async function connect() { exponentialBackoff(3 /* max retries */, 2 /* seconds delay */, async function toTry() { time('Connecting to Bluetooth Device... '); logII('Connecting to GATT Server...'); logII('> Name: ' + bluetoothDevice.name); logII('> Id: ' + bluetoothDevice.id); opt.devicename = bluetoothDevice.name; opt.deviceID = bluetoothDevice.id; wrapper.invokeMethodAsync('GetResult', opt, "連接中..."); wrapper.invokeMethodAsync('UpdateError', ''); const server = await bluetoothDevice.gatt.connect(); logII('Getting Services...'); const services = await server.getPrimaryServices(); logII('Getting Characteristics...'); for (const service of services) { logII('> Service: ' + service.uuid); const characteristics = await service.getCharacteristics(); characteristics.forEach(characteristic => { if (getSupportedPropertiesWrite(characteristic)) { logII('>> Characteristic: ' + characteristic.uuid); opt.characteristicUuid = characteristic.uuid; myDescriptor = characteristic; return; } }); if (opt.characteristicUuid) { if (tools) tools.classList.remove('hidden'); if (btnDisconnect) btnDisconnect.classList.remove('hidden'); if (btnReconnect) btnReconnect.classList.remove('hidden'); wrapper.invokeMethodAsync('GetResult', opt, "已連接"); wrapper.invokeMethodAsync('UpdateError', ''); return; } } }, function success() { logII(`> Bluetooth Device ${bluetoothDevice.name} connected. `); }, function fail() { time('Failed to reconnect.'); }); }2.2 組件頁面發(fā)送指令執(zhí)行.
其中我設(shè)置的MaxChunk是100,如果安卓平臺(tái)出現(xiàn)打印不全等莫名故障,可以把MaxChunk設(shè)置為20試試.具體請(qǐng)自行百度.
WriteChunk(commands); async function WriteChunk(string) { if (!myDescriptor && !serialWriter) { console.log(' > !myDescriptor serialWriter null!'); return; } console.log('WriteChunk', string); var buffer = GBK.encode(string); var buffer1 = new Uint8Array(buffer).buffer; for (let i = 0, j = 0, length = buffer1.byteLength; i < length; i += opt.maxChunk, j++) { let subPackage = buffer1.slice(i, i + opt.maxChunk <= length ? (i + opt.maxChunk) : length); await _print(subPackage); } } async function _print(buffer) { try { logII('Setting Characteristic User Description...'); console.log(buffer); if (myDescriptor) await myDescriptor.writeValue(buffer); } catch (error) { logErr('Argh! ' + error); } try { if (serialWriter) { await serialWriter.write(buffer); } } catch (error) { logErr('Argh! ' + error); } }3. Demo工程頁面
工程引用 BootstrapBlazor.Bluetooth 包
_Imports.razor加入一行 @using BootstrapBlazor.Components
3.1 新建PrintDemo.razor測(cè)試頁完整例子 https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/BtPrinterPage.razor
razor代碼
<Printer @ref="printer" OnResult="OnResult" OnError="OnError" OnUpdateStatus="OnUpdateStatus" OnUpdateError="OnError" OnGetDevices="OnGetDevices" /> <div @ref="printer.PrinterElement"> <button data-action="btnConnect" class="btn btn-outline-primary">連接</button> <button data-action="btnDisconnect" class="btn btn-outline-danger">斷開</button> @*<button data-action="btnReconnect" class="btn btn-outline-secondary">重連</button>*@ <button data-action="tools" class="btn btn-outline-primary" @onclick="printer.Print">@printer.PrintButtonText</button></div><pre>@message</pre><pre style="color:green">@statusmessage</pre><pre style="color:red">@errmessage</pre><p/>3.2 cs代碼
@code{ Printer printer { get; set; } = new Printer(); /// <summary> /// 顯示內(nèi)置界面 /// </summary> bool ShowUI { get; set; } = false; private string? message; private string? statusmessage; private string? errmessage; private Task OnResult(string message) { this.message = message; StateHasChanged(); return Task.CompletedTask; } private Task OnUpdateStatus(string message) { this.statusmessage = message; StateHasChanged(); return Task.CompletedTask; } private Task OnError(string message) { this.errmessage = message; StateHasChanged(); return Task.CompletedTask; } private Task OnGetDevices(List<string>? devices) { this.message = ""; if (devices == null || devices.Count == 0) return Task.CompletedTask; this.message += $"已配對(duì)設(shè)備{devices.Count}:{Environment.NewLine}"; devices.ForEach(a => this.message += $" {a}{Environment.NewLine}"); //this.message = this.message.Replace(Environment.NewLine, "<br/>"); StateHasChanged(); return Task.CompletedTask; } }
內(nèi)置的其他兩個(gè)組件介紹
4. 藍(lán)牙設(shè)備電量組件完整例子 https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/BtBatteryLevelPage.razor
<button class="btn btn-outline-secondary" @onclick="GetBatteryLevel ">查詢電量</button><BatteryLevel @ref="batteryLevel" OnUpdateValue="OnUpdateValue" OnUpdateStatus="OnUpdateStatus" OnUpdateError="OnError" /><br/><progress max="100" value="@value"> @value % </progress><pre>@message</pre><pre style="color:green">@statusmessage</pre><pre style="color:red">@errmessage</pre>@code{ BatteryLevel batteryLevel { get; set; } = new BatteryLevel(); private decimal? value=0; private string? message; private string? statusmessage; private string? errmessage; private Task OnResult(string message) { this.message = message; StateHasChanged(); return Task.CompletedTask; } private Task OnUpdateValue(decimal value) { this.value = value; this.statusmessage = $"設(shè)備電量{value}%"; StateHasChanged(); return Task.CompletedTask; } private Task OnUpdateStatus(BluetoothDevice device) { this.statusmessage = device.Status; StateHasChanged(); return Task.CompletedTask; } private Task OnError(string message) { this.errmessage = message; StateHasChanged(); return Task.CompletedTask; } public async void GetBatteryLevel() { await batteryLevel.GetBatteryLevel(); }}5. 藍(lán)牙設(shè)備電量組件
完整例子 https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/BtHeartratePage.razor
<button class="btn btn-outline-secondary" @onclick="GetHeartrate ">查詢心率</button><button class="btn btn-outline-secondary" @onclick="StopHeartrate ">停止讀取</button><Heartrate @ref="heartrate" OnUpdateValue="OnUpdateValue" OnUpdateStatus="OnUpdateStatus" OnUpdateError="OnError" /><h2 style="color:red" data-action="heartrate"/><pre>@message</pre><pre style="color:green">@statusmessage</pre><pre style="color:red">@errmessage</pre>@code{ string heartrateIcon;// { get => (heartrateIcon == "?" ? "?" : "?"); } Heartrate heartrate { get; set; } = new Heartrate(); private string? message; private int? value; private string? statusmessage; private string? errmessage; private Task OnResult(string message) { this.message = message; StateHasChanged(); return Task.CompletedTask; } private Task OnUpdateValue(int value) { this.value = value; this.statusmessage = $"心率{value}"; StateHasChanged(); return Task.CompletedTask; } private Task OnUpdateStatus(BluetoothDevice device) { this.statusmessage = device.Status; StateHasChanged(); return Task.CompletedTask; } private Task OnError(string message) { this.errmessage = message; StateHasChanged(); return Task.CompletedTask; } public async void GetHeartrate() { await heartrate.GetHeartrate(); } public async void StopHeartrate() { await heartrate.StopHeartrate(); }}其他資料
Web Bluetooth API 網(wǎng)站通過 JavaScript 與藍(lán)牙設(shè)備進(jìn)行通信 ，在Windows下水土不服解決辦法 - AlexChow - 博客園
Bluetooth組件源碼
https://github.com/densen2014/BootstrapBlazor.Bluetooth
Blazor組件自做系列Blazor組件自做一 : 使用JS隔離封裝viewerjs庫Blazor組件自做二 : 使用JS隔離制作手寫簽名組件Blazor組件自做三 : 使用JS隔離封裝ZXing掃碼Blazor組件自做四: 使用JS隔離封裝signature_pad簽名組件Blazor組件自做五: 使用JS隔離封裝Google地圖Blazor組件自做六: 使用JS隔離封裝Baidu地圖Blazor組件自做七: 使用JS隔離制作定位/持續(xù)定位組件Blazor組件自做八: 使用JS隔離封裝屏幕鍵盤kioskboard.js組件Blazor組件自做九: 使用JS隔離制作藍(lán)牙打印組件(通用跨平臺(tái)隔空打印小票/標(biāo)簽方案)
知識(shí)共享許可協(xié)議本作品采用 知識(shí)共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進(jìn)行許可。歡迎轉(zhuǎn)載、使用、重新發(fā)布，但務(wù)必保留文章署名AlexChow（包含鏈接： https://github.com/densen2014 ），不得用于商業(yè)目的，基于本文修改后的作品務(wù)必以相同的許可發(fā)布。如有任何疑問，請(qǐng)與我聯(lián)系 。
以上就是關(guān)于pos機(jī)如何操作重打小票, 使用JS隔離作通用跨平臺(tái)無線打印小票的知識(shí)，后面我們會(huì)繼續(xù)為大家整理關(guān)于pos機(jī)如何操作重打小票的知識(shí)，希望能夠幫助到大家！
