網上有很多關于pos機如何操作重打小票, 使用JS隔離作通用跨平臺無線打印小票的知識，也有很多人為大家解答關于pos機如何操作重打小票的問題，今天pos機之家(www.www690aa.com)為大家整理了關于這方面的知識，讓我們一起來看下吧!
本文目錄一覽：
pos機如何操作重打小票
各位,好久不見,這段時間事情太多了,一直沒空更新文章,sosososorry.
如果我告訴您網站能以安全和隱私保護的方式與附近的藍牙設備進行通信，您會怎么想？如此一來，心率監測器、會唱歌的燈，甚至海龜都可以直接與網站交互了。到目前為止，僅有部分針對特定平臺的應用可以實現與藍牙設備的交互。Web Bluetooth API 旨在改變這一現狀，以期將此功能賦予 Web 瀏覽器。筆者所在的POS行業更是經常用到各種藍牙小票機,藍牙標簽機,如此一來整個 Blazor ,app客戶端都不用了, 很是利好啊! 話不多說,開整!原文鏈接：https://www.cnblogs.com/densen2014/p/16749910.html
1. 運行截圖演示地址 DemoSSR
連接設備
連接成功
打印標簽
我測試這臺打印機使用cpcl語言,測試的指令是
! 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. 源碼大家參考開源地址,僅摘抄要點和寫組件使用方式
本組件主要是調用瀏覽器API實現基于瀏覽器的藍牙功能,現代桌面和安卓移動端都支持.包括MAUI Blazor
navigator.bluetooth.requestDevice 2.1 關鍵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 組件頁面發送指令執行.
其中我設置的MaxChunk是100,如果安卓平臺出現打印不全等莫名故障,可以把MaxChunk設置為20試試.具體請自行百度.
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測試頁完整例子 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> /// 顯示內置界面 /// </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 += $"已配對設備{devices.Count}:{Environment.NewLine}"; devices.ForEach(a => this.message += $" {a}{Environment.NewLine}"); //this.message = this.message.Replace(Environment.NewLine, "<br/>"); StateHasChanged(); return Task.CompletedTask; } }
內置的其他兩個組件介紹
4. 藍牙設備電量組件完整例子 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 = $"設備電量{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. 藍牙設備電量組件
完整例子 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 網站通過 JavaScript 與藍牙設備進行通信 ，在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隔離制作定位/持續定位組件Blazor組件自做八: 使用JS隔離封裝屏幕鍵盤kioskboard.js組件Blazor組件自做九: 使用JS隔離制作藍牙打印組件(通用跨平臺隔空打印小票/標簽方案)
知識共享許可協議本作品采用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名AlexChow（包含鏈接： https://github.com/densen2014 ），不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。如有任何疑問，請與我聯系 。
以上就是關于pos機如何操作重打小票, 使用JS隔離作通用跨平臺無線打印小票的知識，后面我們會繼續為大家整理關于pos機如何操作重打小票的知識，希望能夠幫助到大家！
