uniapp 打印小票

最新推荐文章于 2024-06-11 08:51:41 发布
最新推荐文章于 2024-06-11 08:51:41 发布
阅读量2k 收藏 8
点赞数 1
分类专栏： uniapp 文章标签： javascript uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43073383/article/details/120502819
版权

uniapp 链接热敏打印机打印下票，一下是页面代码，引入js 放在下载里面https://download.csdn.net/download/weixin_43073383/25156646
注：此处因业务需要走的缓存，可自行修改为传参获取参数

<template>
    <aPage :headerStyle="4" :footerHeight="0" title="蓝牙打印">
        <view slot="gBody" class="grace-body gracedy">
            <view>
                <button @click="searchBle">{{ searching ? '停止搜索' : '搜索蓝牙' }}</button>
                <view style="margin-top: 30upx;" :key="index" v-for="(item, index) in info.devices">
                    <view class="onBluetoothList" @click="connect(item, index)" style="width: 100%; ">
                        <view class="bluetoothName" style="{color:item.deviceId == info.deviceId ? '#0081FF' : ''}">
                            {{ item.name }}
                            <view v-if="item.deviceId == info.deviceId">
                                {{ info.readySucc ? '连接成功' : info.readyFail ? '连接失败' : '连接中' }}
                            </view>
                        </view>
                        <view class="">
                            <image :src="item.deviceId == info.deviceId ? '../../static/img/pay/selectGift.png' : '../../static/img/pay/noGift.png'"
                                mode=""></image>
                        </view>
                    </view>
                </view>

                <view v-if="print.els">
                    <button style="margin-top: 100upx;" @click="printClick()">打印</button>
                    <view>
                        {{print.show}}
                    </view>
                </view>
                <view v-else>
                    <button style="margin-top: 100upx;" @click="receiptTest()">标签测试</button>
                    <button style="margin-top: 100upx;" @click="receiptTest2()">标签测试2</button>
                </view>
            </view>
        </view>
    </aPage>
</template>

<script>
    var bluetooth = require('util/bluetooth/bluetooth')
    bluetooth = bluetooth.default || bluetooth
    var tsc = require("../../util/ble/tsc.js");
    var esc = require("../../util/ble/esc.js");
    var encode = require("../../util/ble/encoding.js");
    export default {
        data() {
            return {
                searching: false,
                info: {},
                print: {},
            };
        },
        onLoad: function() {
            var self = this
            try {
                var print = uni.getStorageSync('@print')
                // print = '{"show": "ddd", "els":[{"text":"ddd"}]}'
                if (print) {
                    self.print = JSON.parse(print)
                }

            } catch (e) {
                console.error(e)
            }

            self._delegate = {
                fail(e, tag) {
                    self.$store.$common.loading(false)
                    this.change()
                    var code = e && e.code
                    if (code == 0) {
                        //正常
                    } else if (code == 10000) {
                        uni.showToast({
                            title: '未初始化蓝牙适配器',
                            icon: 'none'
                        })
                    } else if (code == 10001) {
                        uni.showToast({
                            title: '当前蓝牙适配器不可用',
                            icon: 'none'
                        })
                    } else if (code == 10002) {
                        uni.showToast({
                            title: '没有找到指定设备',
                            icon: 'none'
                        })
                    } else if (code == 10003) {
                        uni.showToast({
                            title: '连接失败',
                            icon: 'none'
                        })
                    } else if (code == 10004) {
                        uni.showToast({
                            title: '没有找到指定服务',
                            icon: 'none'
                        })
                    } else if (code == 10005) {
                        uni.showToast({
                            title: '没有找到指定特征值',
                            icon: 'none'
                        })
                    } else if (code == 10006) {
                        uni.showToast({
                            title: '当前连接已断开',
                            icon: 'none'
                        })
                    } else if (code == 10007) {
                        uni.showToast({
                            title: '当前特征值不支持此操作',
                            icon: 'none'
                        })
                    } else if (code == 10008) {
                        uni.showToast({
                            title: '其余所有系统上报的异常',
                            icon: 'none'
                        })
                    } else if (code == 10009) {
                        uni.showToast({
                            title: 'Android 系统特有，系统版本低于 4.3 不支持 BLE',
                            icon: 'none'
                        })
                    }
                },
                discovering() {
                    uni.showToast({
                        title: '正在搜索附近打印机设备',
                        icon: "none"
                    })
                },
                stateDisable() {
                    uni.showModal({
                        title: '提示',
                        content: '本机蓝牙不可用',
                    })
                },
                search(ing) {
                    self.searching = ing
                },
                change() {
                    self.info = Object.assign({}, self._bluetooth.formation())
                    self.$store.$common.loading(false)
                },
                connection() {
                    self.$store.$common.loading(true)
                    this.change()
                },
                ready() {
                    this.change()
                },
            }

            self._bluetooth = bluetooth.load("print", self._delegate, true)
            self._delegate.change()
        },

        beforeDestroy() {
            this._bluetooth._clear(this._delegate)
        },

        methods: {
            searchBle() {
                if (this.searching) {
                    this._bluetooth.stopSearch()

                } else {
                    this._bluetooth.startSearch()
                }
            },
            connect(item) {
                this._bluetooth.connection(item.deviceId)
            },
            printEsc(els) {
                var command = esc.jpPrinter.createNew()
                command.init()
                var len = els.length
                for (var i = 0; i < len; i++) {
                    var el = els[i]
                    // 加粗
                    el.bold !== undefined && command.bold(el.bold)
                    // 字体大小
                    el.fontSize !== undefined && command.setFontSize(el.fontSize)
                    // 对齐方式
                    el.align !== undefined && command.setSelectJustification(el.align)
                    // 行空白
                    el.rowSpace && command.rowSpace(el.rowSpace)
                    // 绝对定位
                    el.offsetX && command.setAbsolutePrintPosition(el.offsetX)
                    // 打印文字
                    el.text && command.setText(el.text)
                    // 打印换行
                    el.print !== undefined && command.setPrint()
                    // 打印走纸
                    el.printAndFeed !== undefined && command.setPrintAndFeed(el.printAndFeed)
                }

                command.setPrint()
                command.setPrintAndFeedRow(1);
                this._bluetooth.printer().prepareSend(command.getData());
            },

            printClick() {
                this.printEsc(this.print.els)
            },

            receiptTest2() {
                this.printEsc([{
                    bold: 1,
                    fontSize: 16,
                    align: 1,
                    rowSpace: 100,
                    text: '杭州总店',
                    print: 1,
                }, {
                    rowSpace: 60,
                    bold: 0,
                    fontSize: 0,
                    align: 0,
                    text: '时间：2019-11-11 12:10:30',
                    print: 1,
                }, {
                    bold: 0,
                    fontSize: 0,
                    align: 0,
                    text: '编号：SD10000000000000000',
                    printAndFeed: 80,
                }, {
                    bold: 5,
                    rowSpace: 80,
                    text: '货号',
                    printAndFeed: 80,
                }, {
                    offsetX: 80,
                    text: '颜色',
                }, {
                    offsetX: 180,
                    text: '尺码',
                }, {
                    offsetX: 270,
                    text: '单价',
                }, {
                    offsetX: 380,
                    text: '数量',
                }, {
                    offsetX: 480,
                    text: '金额',
                }])
            },

            //票据测试
            receiptTest() {
                var that = this;
                var canvasWidth = that.canvasWidth
                var canvasHeight = that.canvasHeight
                var command = esc.jpPrinter.createNew()
                command.init()
                // 标题
                command.bold(1); //加粗
                command.setFontSize(16); //字体大小
                command.setSelectJustification(1) //居中
                command.rowSpace(100);
                command.setText("杭州总店");
                command.setPrint();
                command.rowSpace(60);

                command.bold(0); //取消加粗
                command.setFontSize(0); //正常字体
                //时间
                command.setSelectJustification(0); //居左
                command.setText("时间：2019-11-11 12:10:30");
                command.setPrint();
                //编号
                command.setSelectJustification(0); //居左
                command.setText("编号：SD10000000000000000");
                command.setPrintAndFeed(80); //打印并走纸feed个单位
                //列表
                command.rowSpace(80); //间距
                command.bold(5); //加粗
                command.setText("货号");
                command.setAbsolutePrintPosition(100);
                command.setText("颜色");
                command.setAbsolutePrintPosition(180);
                command.setText("尺码");
                command.setAbsolutePrintPosition(270);
                command.setText("单价");
                command.setAbsolutePrintPosition(380);
                command.setText("数量");
                command.setAbsolutePrintPosition(480);
                command.setText("金额");
                command.setPrint()
                command.bold(0); //加粗
                // -------1
                command.setText("86001W");
                command.setAbsolutePrintPosition(100);
                command.setText("黄色");
                command.setAbsolutePrintPosition(180);
                command.setText("均码");
                command.setAbsolutePrintPosition(270);
                command.setText("16947.92");
                command.setAbsolutePrintPosition(390);
                command.setText("1");
                command.setAbsolutePrintPosition(480);
                command.setText("19647.92");
                command.setPrint()
                // ------2
                command.setText("86001W");
                command.setAbsolutePrintPosition(100);
                command.setText("黄色");
                command.setAbsolutePrintPosition(180);
                command.setText("均码");
                command.setAbsolutePrintPosition(270);
                command.setText("16947.92");
                command.setAbsolutePrintPosition(390);
                command.setText("1");
                command.setAbsolutePrintPosition(480);
                command.setText("19647.92");
                command.setPrint()
                // -------3
                command.setText("86001W");
                command.setAbsolutePrintPosition(100);
                command.setText("黄色");
                command.setAbsolutePrintPosition(180);
                command.setText("均码");
                command.setAbsolutePrintPosition(270);
                command.setText("16947.92");
                command.setAbsolutePrintPosition(390);
                command.setText("1");
                command.setAbsolutePrintPosition(480);
                command.setText("19647.92");
                command.setPrint();


                //合计
                command.bold(5); //加粗
                command.setAbsolutePrintPosition(120);
                command.setText("总数：10");
                command.setAbsolutePrintPosition(320);
                command.setText("合计：10000");
                command.setPrint();
                command.setAbsolutePrintPosition(120);
                command.setText("实收：10000");
                command.setAbsolutePrintPosition(320);
                command.setText("找零：0");
                command.setPrint();
                // 收银员
                command.rowSpace(120); //间距
                command.setAbsolutePrintPosition(120);
                command.setText("店员：何丹");
                command.setAbsolutePrintPosition(320);
                command.setText("会员：1000000000");
                command.setPrint()

                //提示
                command.rowSpace(80); //间距
                command.bold(2); //加粗
                command.setSelectJustification(1); //居中
                command.setText("售出商品购买后7天内,可凭小票退换");
                command.setPrint();
                command.setText("(注：吊牌未拆剪,商品未洗涤)");
                command.setPrint();

                //电话
                command.setSelectJustification(0); //居左
                command.setText("客服电话:(0571)86011123");
                command.setPrint();
                command.setText("联系地址:浙江省诸暨市暨阳街道健康路1-1号");
                command.setPrint();
                command.setPrintAndFeedRow(1);
                this._bluetooth.printer().prepareSend(command.getData());
            },
        }
    };
</script>

<style>
    .onBluetoothList {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 60rpx;
    }

    .bluetoothName {
        width: 80%;
    }

    .onBluetoothList image {
        width: 60rpx;
        height: 60rpx;
    }
</style>

附：项目调用参数

{
	"show": "订单编号：wdy2s210429403850",
	"els": [{
		"bold": 1,
		"fontSize": 16,
		"align": 1,
		"rowSpace": 100,
		"text": "测试",
		"print": 1
	}, {
		"bold": 1,
		"fontSize": 16,
		"align": 1,
		"rowSpace": 100,
		"text": "喝牛奶坎坎坷坷",
		"print": 1
	}, {
		"rowSpace": 60,
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "姓名：以后还会",
		"print": 1
	}, {
		"rowSpace": 60,
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "联系方式：15168828260",
		"print": 1
	}, {
		"rowSpace": 60,
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "下单时间：2021-04-29 11:13:05",
		"print": 1
	}, {
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "订单编号：wdys210429403850",
		"print": 1
	}, {
		"bold": 5,
		"rowSpace": 80,
		"text": "商品",
		"printAndFeed": 80
	}, {
		"offsetX": 80,
		"text": "单价"
	}, {
		"offsetX": 180,
		"text": "数量"
	}, {
		"offsetX": 270,
		"text": "总价",
		"print": 1
	}, {
		"bold": 0,
		"rowSpace": 80,
		"text": "农家生咸鸭蛋生新鲜黄",
		"printAndFeed": 80
	}, {
		"offsetX": 80,
		"text": "20"
	}, {
		"offsetX": 180,
		"text": 1
	}, {
		"offsetX": 270,
		"text": "20",
		"print": 1
	}, {
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "运费：0"
	}, {
		"offsetX": 200,
		"text": "优惠金额：0",
		"print": 1
	}, {
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "总计金额：20"
	}, {
		"offsetX": 200,
		"text": "支付金额：20",
		"print": 1
	}, {
		"rowSpace": 60,
		"bold": 0,
		"fontSize": 0,
		"align": 0,
		"text": "地址：江苏省南京市雨花台区",
		"print": 1
	}]
}
给钱，谢谢！
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
uniapp 链接热敏打印机 打印小票（非完整demo）
09-27
此资源是文章链接附带资源，不是完整demo，需要自行放到项目中整合，如果不需要请勿下载，请仔细阅读描述，不需要请勿下载
uniapp 微信小程序小票打印机打印教程（超详细讲解） 完整代码，下载后可直接使用
07-24
commands.js
uniApp原生Android蓝牙打印机，打印小票
蓝斑.json的博客
08-02 760
u-button plain size="mini" @click="onConnect(device,printTest)" shape="circle" >连接重新连接断开连接
uniapp怎么实现条形码
最新发布
qq_60504665的博客
06-11 642
"uniapp" 指的是 UniApp，一个使用 Vue.js 开发所有前端应用的框架，可以编译到iOS、Android、H5、以及各种小程序等多个平台。：在页面的脚本部分，你可以使用 UniApp 提供的 API 来访问 canvas 的上下文，并绘制条形码。请注意，这些步骤和代码只是一个大致的指导，具体的实现可能会根据你的项目需求和所选的条形码生成库而有所不同。另外，你也可以考虑使用服务端生成条形码图片，然后在前端直接展示图片的方式，这样可以避免前端绘制的复杂性。你需要根据你的需求来实现这部分逻辑。
uniapp连接蓝牙打印小票（附加demo）
weixin_73077230的博客
01-31 2441
在初始化成功后，可以进行蓝牙设备的搜索和连接操作。监听蓝牙设备的特征值变化：对于需要监听特定特征值变化的操作，可以使用。方法开始搜索蓝牙设备。可以设置搜索的时间和过滤条件，然后通过监听。方法获取蓝牙适配器对象。可以使用该对象进行后续的蓝牙操作。方法监听特征值的变化。获取蓝牙设备的服务和特征值：连接成功后，使用。连接蓝牙设备：选择要连接的蓝牙设备后，使用。方法获取蓝牙设备的服务列表。获取蓝牙适配器：首先，需要通过。事件获取搜索到的蓝牙设备列表。方法获取每个服务的特征值列表。事件获取蓝牙设备返回的数据。
uniCloud发起小票打印，uniapp小票打印实现方案
u010520850的博客
10-27 1638
优声云打印机uni-app打印SDK上线了，支持WIFI云打印机、4G云打印机、4G+WIFI云打印机，WIFI+蓝牙云打印机，可帮助uni-app、各平台小程序、Web等方便打印出订单小票 使用教程 云函数调用发起打印 点击右侧按钮导入本插件 导入后，本插件在项目uniCloud/cloudfunctions/printer目录下 优声云打印对接准备工作 注册一个开发者帐号 注册地址(https://console.ushengyun.com) 获取开发者参数 登录->开放平台->API信息
前端小票打印、网页打印（uniapp、小程序、ESC/POS指令）
Linxi_001的博客
05-26 8410
前端打印，热敏打印机，小票打印，ESC/POS指令，票据打印，网页打印
download (2)_uniapp蓝牙打印_
10-02
而`蓝牙打印`则是物联网技术的一个应用场景，尤其在零售、餐饮等需要即时打印小票的场合中广泛使用。 本文将详细阐述`uniapp`结合蓝牙打印机的实现原理和关键知识点。 1. **uniapp框架介绍**： - `uniapp`由...
uniapp开发蓝牙适配佳博打印指令（esc,tsc）js
02-17
本话题聚焦于利用uni-app进行蓝牙适配器的开发，特别是与佳博（GP）打印机进行交互的JavaScript指令，这在零售、餐饮、物流等需要现场打印的小票或标签的应用场景中非常常见。 佳博打印机支持ESC/POS指令集和TSC...
uniapp打印功能实现
spring_007_999的博客
05-17 5105
要实现的需求是uniapp打包的Android APP 安装到商米一体机里面（一体机含有内置打印机），在用户支付成功后自动打印小票，uniapp没有直接打印的方法，要想和打印机联动需要借助第三方的东西，于是我倒uniapp的插件应用市场搜索打印插件，终于找到了一个免费好用的插件（打印的内容位置设置只有左、中、右三种效果，如果要往里一点，可以在文字前面加空格，一个空格占位一个字符，一个中文汉字占位2个字符， 如果要打印复杂的样式，可以截个图打印为图片。
Android手机蓝牙打印机打印小票
02-05
这段时间公司给人开发连接打印机的手机端APP时候做的一个小的例子，直接打开手机蓝牙，连接打印机，还有就是打印出来的内容我直接在程序里面写死了，大家可以修改一下，就能用了，用的Androidstudio开发的。。。。
uniapp-Gprinter 佳博蓝牙打印插件
11-11
http://www.html5-app.com/show/120 描述如图哈， 做原作者要收费的哈。 我也是从愿作者那花钱买来的
Android-手机蓝牙连接热敏打印机打印小票
08-13
手机蓝牙连接热敏打印机打印小票
Android手机打印机打印小票 （ip地址的）
02-05
这段时间公司给人开发连接打印机的手机端APP时候做的一个小的例子，直接打开手机端输打印机的IP，连接打印机，还有就是打印出来的内容直接在程序里面可修改，大家可以修改一下，就能用了，用的Androidstudio开发的。。。。
android usb打印机打印小票
10-19
本代码适用android系统且带有usb接口的设备，直连usb小票打印机实现打印功能
Uniapp Android 佳博 小票打印机 插件
GuoGuoABC
04-20 3447
Uniapp Android 佳博 小票打印机 插件 Uniapp Android 佳博小票打印机插件: 支持图片、条型码、二维码 打印。 1. 实例化插件 const gp= uni.requireNativePlugin('Html5App-Gprinter'); 2.本插件包含4个方法 一、打开蓝牙搜索界面，搜索蓝牙打印机 ,setBackgroundColor：是蓝牙搜索界面头部背景颜色，默认为：蓝色。 gp.BluetoothPort({setBackgroundColor:"..
uniapp原生插件之安卓热敏打印机打印插件
夜中雨滴的专栏
11-04 553
安卓热敏打印机打印插件，自动授权，打印机连接监听，打印文本，条形码，二维码，切纸，打印机状态，打印结果查询等。
Android 平板通过USB口连接小票打印机
07-25
已经自测过完全可以连接上对应的USB设备并打印
uniapp实现usb小票打印
01-28
Uniapp是一个基于Vue.js的跨平台应用开发框架，可以实现在多个平台上进行应用开发，包括手机端和桌面端。要实现USB小票打印，可以通过uniapp的插件机制来实现。 首先，需要在uniapp项目中引入USB打印机的相关插件，例如honeywell usb打印机插件。然后，在uniapp项目中编写相关的代码来调用该插件实现USB小票打印功能。 在代码中可以先进行USB打印机的连接，然后通过插件提供的接口来进行打印数据的发送。可以使用HTML5的打印功能来实现小票打印的样式设计，然后将需要打印的小票数据通过插件的接口发送给USB打印机，实现小票的打印功能。 另外，在uniapp项目中也可以通过调用原生的API来实现USB小票打印功能，比如在APP端可以通过调用Android或IOS的USB打印机API接口来实现USB小票打印功能。 总的来说，要在uniapp中实现USB小票打印功能，需要引入相关的USB打印机插件，并且在项目中进行适配和调用相关的API来实现USB小票打印功能。通过插件和原生API的调用，可以在uniapp中实现便捷高效的USB小票打印功能。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

给钱，谢谢！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值