vue页面使用js实现前端打印功能

vue页面使用js实现前端打印功能

在这里插入图片描述
添加打印输出按钮
在这里插入图片描述
printContent实现打印功能,针对于打印表单时获取不到页面数据可以使用js原生。遍历循环你所要获取的元素。
在这里插入图片描述
针对于打印出来的页面会出现页眉和页脚重新在写一个style
在这里插入图片描述
这样数据就可以渲染上去了,然后页眉页脚也没有了。这里margin的值可以自己随便更改。如果你觉得再添加一个style麻烦的话,可以在打印页面的时候取消掉页眉和页脚也是一样的。
在这里插入图片描述
最后想要是页面上的打印按钮隐藏,使用原生js方法让它的样式隐藏就可以了。
在这里插入图片描述
在这里插入图片描述

这样就完成啦!

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
实现小程序与蓝牙打印机的连接,需要先通过小程序的wx.openBluetoothAdapter()接口打开蓝牙适配器,然后使用wx.startBluetoothDevicesDiscovery()接口搜索周围的蓝牙设备,获取到目标设备的deviceId之后,即可通过wx.createBLEConnection()接口建立与蓝牙设备的连接。 建立连接后,我们需要发送打印指令给蓝牙打印机。具体指令格式需要根据打印机型号和使用打印语言来确定,一般都会提供相应的打印指令文档。打印指令可以是纯文本或者图像等,我们需要将要打印的内容转换为对应的指令格式。 以下是一个基本的打印指令示例,用于打印一张表单: ``` // 打印指令 const cmd = [ 0x1B, 0x40, // 初始化打印机 0x1B, 0x61, 0x01, // 设置对齐方式为居中 0x1B, 0x21, 0x30, // 设置字体大小为标准 0x0A, // 换行 0x0A, // 换行 0x1B, 0x45, 0x01, // 加粗 0x43, 0x6F, 0x6D, 0x70, 0x61, 0x6E, 0x79, // 打印标题 0x1B, 0x45, 0x00, // 取消加粗 0x0A, // 换行 0x1B, 0x21, 0x00, // 设置字体大小为正常 0x1B, 0x61, 0x00, // 设置对齐方式为左对齐 0x0A, // 换行 0x0A, // 换行 0x54, 0x69, 0x6D, 0x65, // 打印表单项目 0x20, 0x3A, 0x20, 0x31, 0x30, 0x3A, 0x30, 0x30, // 时间 0x0A, // 换行 0x4E, 0x61, 0x6D, 0x65, // 姓名 0x20, 0x3A, 0x20, 0x4A, 0x6F, 0x68, 0x6E, // John 0x0A, // 换行 0x41, 0x67, 0x65, // 年龄 0x20, 0x3A, 0x20, 0x32, 0x36, // 26 0x0A, // 换行 0x47, 0x65, 0x6E, 0x64, 0x65, 0x72, // 性别 0x20, 0x3A, 0x20, 0x4D, // M 0x0A, // 换行 0x0A, // 换行 0x1D, 0x56, 0x01, // 切纸 ]; // 发送打印指令 wx.writeBLECharacteristicValue({ deviceId, serviceId, characteristicId, value: new Uint8Array(cmd).buffer, success(res) { console.log('writeBLECharacteristicValue success', res); }, fail(res) { console.log('writeBLECharacteristicValue fail', res); } }); ``` 这里的打印指令是使用ESC/POS语言编写的,通过一系列的控制码来控制打印机完成对应的操作,如加粗、对齐、换行、切纸等。具体指令可以根据打印机型号和语言来自行编写。 需要注意的是,由于不同的打印机型号和蓝牙模块可能存在一些兼容性问题,建议在实际开发中进行充分测试和调试。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值