记录--前端小票打印、网页打印

执意独行

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

 一、小票打印

目前市面上的小票打印机大多采用的打印指令集为ESC/POS指令，它可以使用ASCII码、十进制、十六进制来控制打印，我们可以使用它来控制字体大小、打印排版、字体加粗、下划线、走纸、切纸、控制钱箱等，下面以初始化打印机为例：

1. ASCII码  ESC  @
2. 十进制码  27  64
3. 十六进制  1B  40

复制代码

小票打印纸的宽度一般可分58mm和80mm，这里指的是打印纸的宽度，但是在实际打印的时候，有效打印区域并没有这么宽。

1. 打印机纸宽58mm，页的宽度384，字符宽度为1，每行最多盛放32个字符
2. 打印机纸宽80mm，页的宽度576，字符宽度为1，每行最多盛放48个字符

复制代码

上面说的字符指的是打印到小票上的内容，其中数字和字母占1个字符，中文占2个字符，也就是说，如果使用58mm的打印纸，一行最多可以打印16个汉字或者32个数字 。
当然这是在不改变字体大小的情况下，如果我们改变了字体大小，那么一行盛放的内容也会改变。

1. //控制字符大小
3. ASCII码   GS  !   n
4. 十进制码  29  33  n
5. 十六进制  1D  21  n

复制代码

1.这里的n是一个变量， 0 ≤ n ≤ 255 
2.用二进制表示，n的取值范围就是00000000到11111111，其中二进制的前四位用来控制宽度，后四位用来控制高度。0000表示不变，0001表示放大2倍，0002表示放大3倍，以此类推
3.该命令对所有字符(英数字符和汉字) 有效。
4.缺省值：n = 0

 下面我们来看一下字符的不同放大倍数（这里的1倍，表示使用默认大小）：
放大倍数n(二进制)n（十进制）宽度1倍，高度1倍000000000宽度1倍，高度2倍000000011宽度1倍，高度3倍000000022宽度2倍，高度1倍0001000016宽度2倍，高度2倍0001000117宽度2倍，高度3倍0001000218宽度3倍，高度1倍0002000032宽度3倍，高度2倍0002000133宽度3倍，高度3倍0002000234
 

PS:打印纸时间有些长，字迹有些模糊，见谅

 打印指令封装

1. // 打印机纸宽58mm，页的宽度384，字符宽度为1，每行最多盛放32个字符
2. // 打印机纸宽80mm，页的宽度576，字符宽度为1，每行最多盛放48个字符
3. const PAGE_WIDTH = 576;
4. const MAX_CHAR_COUNT_EACH_LINE = 48;
6. //字符串转字节序列
7. function stringToByte(str) {
8.   var bytes = new Array();
9.   var len, c;
10.   len = str.length;
11.   for (var i = 0; i < len; i++) {
12.     c = str.charCodeAt(i);
13.     if (c >= 0x010000 && c <= 0x10FFFF) {
14.       bytes.push(((c >> 18) & 0x07) | 0xF0);
15.       bytes.push(((c >> 12) & 0x3F) | 0x80);
16.       bytes.push(((c >> 6) & 0x3F) | 0x80);
17.       bytes.push((c & 0x3F) | 0x80);
18.     } else if (c >= 0x000800 && c <= 0x00FFFF) {
19.       bytes.push(((c >> 12) & 0x0F) | 0xE0);
20.       bytes.push(((c >> 6) & 0x3F) | 0x80);
21.       bytes.push((c & 0x3F) | 0x80);
22.     } else if (c >= 0x000080 && c <= 0x0007FF) {
23.       bytes.push(((c >> 6) & 0x1F) | 0xC0);
24.       bytes.push((c & 0x3F) | 0x80);
25.     } else {
26.       bytes.push(c & 0xFF);
27.     }
28.   }
29.   return bytes;
30. }
32. //字节序列转ASCII码
33. //[0x24, 0x26, 0x28, 0x2A] ==> "$&C*"
34. function byteToString(arr) {
35.   if (typeof arr === 'string') {
36.     return arr;
37.   }
38.   var str = '',
39.     _arr = arr;
40.   for (var i = 0; i < _arr.length; i++) {
41.     var one = _arr[i].toString(2),
42.       v = one.match(/^1+?(?=0)/);
43.     if (v && one.length == 8) {
44.       var bytesLength = v[0].length;
45.       var store = _arr[i].toString(2).slice(7 - bytesLength);
46.       for (var st = 1; st < bytesLength; st++) {
47.         store += _arr[st + i].toString(2).slice(2);
48.       }
49.       str += String.fromCharCode(parseInt(store, 2));
50.       i += bytesLength - 1;
51.     } else {
52.       str += String.fromCharCode(_arr[i]);
53.     }
54.   }
55.   return str;
56. }
57. //居中
58. function Center() {
59.   var Center = [];
60.   Center.push(27);
61.   Center.push(97);
62.   Center.push(1);
63.   var strCenter = byteToString(Center);
64.   return strCenter;
65. }
67. //居左
68. function Left() {
69.   var Left = [];
70.   Left.push(27);
71.   Left.push(97);
72.   Left.push(0);
73.   var strLeft = byteToString(Left);
74.   return strLeft;
75. }
76. //居右
77. function Right() {
78.   var right = [];
79.   Left.push(27);
80.   Left.push(97);
81.   Left.push(2);
82.   var strRight = byteToString(right);
83.   return strRight;
84. }
85. //标准字体
86. function Size1() {
87.   var Size1 = [];
88.   Size1.push(29);
89.   Size1.push(33);
90.   Size1.push(0);
91.   var strSize1 = byteToString(Size1);
92.   return strSize1;
93. }
94. //大号字体
95. /*  放大1倍  n = 0
96. *  长宽各放大2倍  n = 17 */
97. function Size2(n) {
98.   var Size2 = [];
99.   Size2.push(29);
100.   Size2.push(33);
101.   Size2.push(n);
102.   var strSize2 = byteToString(Size2);
103.   return strSize2;
104. }
106. // 字体加粗
107. function boldFontOn() {
108.   var arr = []
109.   arr.push(27)
110.   arr.push(69)
111.   arr.push(1)
112.   var cmd = byteToString(arr);
113.   return cmd
114. }
115. // 取消字体加粗
116. function boldFontOff() {
117.   var arr = []
118.   arr.push(27)
119.   arr.push(69)
120.   arr.push(0)
121.   var cmd = byteToString(arr);
122.   return cmd
123. }
124. // 打印并走纸n行
125. function feedLines(n = 1) {
126.   var feeds = []
127.   feeds.push(27)
128.   feeds.push(100)
129.   feeds.push(n)
130.   var printFeedsLines = byteToString(feeds);
131.   return printFeedsLines
132. }
133. // 切纸
134. function cutPaper() {
135.   var cut = []
136.   cut.push(29)
137.   cut.push(86)
138.   cut.push(49)
139.   var cutType = byteToString(cut);
140.   return cutType
141. }
143. // 开钱箱
144. function open_money_box() {
145.   var open = []
146.   open.push(27)
147.   open.push(112)
148.   open.push(0)
149.   open.push(60)
150.   open.push(255)
151.   var openType = byteToString(open)
152.   return openType
153. }
155. // 初始化打印机
156. function init() {
157.   var arr = []
158.   arr.push(27)
159.   arr.push(68)
160.   arr.push(0)
161.   var str = byteToString(arr)
162.   return str
163. }
164. /*
165. 设置左边距
166. len:
167. */
169. function setLeftMargin(len = 1) {
170.   var arr = []
171.   arr.push(29)
172.   arr.push(76)
173.   arr.push(len)
174.   var str = byteToString(arr)
175.   return str
176. }
178. // 设置打印区域宽度
179. function setPrintAreaWidth(width) {
180.   var arr = []
181.   arr.push(29)
182.   arr.push(87)
183.   arr.push(width)
184.   var str = byteToString(arr)
185.   return str
186. }
188. /**
189. * @param str
190. * @returns {boolean} str是否全是中文
191. */
192. function isChinese(str) {
193.   return /^[\u4e00-\u9fa5]$/.test(str);
194. }
196. // str是否全含中文或者中文标点
197. function isHaveChina(str) {
198.   if (escape(str).indexOf("%u") < 0) {
199.     return 0
200.   } else {
201.     return 1
202.   }
203. }
204. /**
205. * 返回字符串宽度(1个中文=2个英文字符)
206. * @param str
207. * @returns {number}
208. */
209. function getStringWidth(str) {
210.   let width = 0;
211.   for (let i = 0, len = str.length; i < len; i++) {
212.     width += isHaveChina(str.charAt(i)) ? 2 : 1;
213.   }
214.   return width;
215. }
217. /**
218. * 同一行输出str1, str2，str1居左, str2居右
219. * @param {string} str1 内容1
220. * @param {string} str2 内容2
221. * @param {string} fillWith str1 str2之间的填充字符
222. * @param {number} fontWidth 字符宽度 1/2
223. *
224. */
225. function inline(str1, str2, fillWith = ' ', fontWidth = 1) {
226.   const lineWidth = MAX_CHAR_COUNT_EACH_LINE / fontWidth;
227.   // 需要填充的字符数量
228.   let fillCount = lineWidth - (getStringWidth(str1) + getStringWidth(str2)) % lineWidth;
229.   let fillStr = new Array(fillCount).fill(fillWith.charAt(0)).join('');
230.   return str1 + fillStr + str2;
231. }
232. /**
233. * 用字符填充一整行
234. * @param {string} fillWith 填充字符
235. * @param {number} fontWidth 字符宽度 1/2
236. */
237. function fillLine(fillWith = '-', fontWidth = 1) {
238.   const lineWidth = MAX_CHAR_COUNT_EACH_LINE / fontWidth;
239.   return new Array(lineWidth).fill(fillWith.charAt(0)).join('');
240. }
242. /**
243. * 文字内容居中，左右用字符填充
244. * @param {string} str 文字内容
245. * @param {number} fontWidth 字符宽度 1/2
246. * @param {string} fillWith str1 str2之间的填充字符
247. */
248. function fillAround(str, fillWith = '-', fontWidth = 1) {
249.   const lineWidth = MAX_CHAR_COUNT_EACH_LINE / fontWidth;
250.   let strWidth = getStringWidth(str);
251.   // 内容已经超过一行了，没必要填充
252.   if (strWidth >= lineWidth) {
253.     return str;
254.   }
255.   // 需要填充的字符数量
256.   let fillCount = lineWidth - strWidth;
257.   // 左侧填充的字符数量
258.   let leftCount = Math.round(fillCount / 2);
259.   // 两侧的填充字符，需要考虑左边需要填充，右边不需要填充的情况
260.   let fillStr = new Array(leftCount).fill(fillWith.charAt(0)).join('');
261.   return fillStr + str + fillStr.substr(0, fillCount - leftCount);
262. }

复制代码

也就是说，如果我们使用的打印机采用的是ESC/POS指令集（我这里使用过佳博、芯烨、斯普瑞特打印机），只要我们想办法把打印指令发送给打印机，打印机就可以识别到并且进行打印等操作。那么我们该如何发送呢？
1.蓝牙打印机

参考掘金 zgt_不梦的文章 微信小程序连接蓝牙打印机打印图片示例

• 初始化蓝牙模块 wx.openBluetoothAdapter()
  
• 初始化完成后搜寻附近的蓝牙设备 wx.startBluetoothDevicesDiscovery()
  
• 监听寻找到新设备的事件 wx.onBluetoothDeviceFound()
  
• 在监听寻找到新设备的事件回调中获取所有蓝牙设备列表 wx.getBluetoothDevices()
  
• 连接低功耗蓝牙设备 wx.createBLEConnection()
  
• 连接成功后获取蓝牙设备服务 wx.getBLEDeviceServices()
  
• 在服务中取(notify=true || indicate=true) && write=true 的特征值的 uuid: wx.getBLEDeviceCharacteristics()
  
• 完成后停止搜寻 wx.stopBluetoothDevicesDiscovery()
  
• 向低功耗蓝牙设备特征值中写入二进制数据 wx.writeBLECharacteristicValue()
  
• 离开页面时取消蓝牙连接 wx.closeBLEConnection()
  
• 关闭蓝牙模块 wx.closeBluetoothAdapter()
  

亲测，好使！在uniapp也可以，只需替换对应的API即可

2.网口打印机

这里我使用的scoket连接，相比于USB打印，这里需要保证打印机和安卓设备在同一局域网下。好处是安卓设备可以和打印机距离较远（比如厨房打印）。这里以斯普瑞特打印机为例：[斯普瑞特官网 www.sprinter.com.cn/

在进行数据通信之前，我们需要知道打印机在此局域网下的 IP， 下图为“一键配网”工具

 通过这个工具我们可以方便快捷的查询到打印机的IP，或者可以根据空闲的网段来修改默认分配的IP，斯普瑞特POS打印机的端口是9100。

如果是其他品牌的打印机，我们也可以使用arp命令来查看当前局域网下的IP
拿到打印机的IP之后我们怎么来测试一下打印机呢？
我们可以使用telnet命令（这个在Windows系统一般默认是关闭的，需要我们手动打开）

1. //telnet + 空格 + ip + 空格 + 端口号
2. telnet 192.168.5.6 9100

复制代码

打开命令行窗口输入telnet命令,按下回车

 如果端口关闭或者无法连接，则显示不能打开到主机的链接，链接失败；端口打开的情况下，链接成功，则进入telnet页面（全黑的），证明端口可用。

连接成功后，我们输入任何内容后，按下回车，打印机就会打印我们刚才输入的内容。
接下来我们要使用scoket来连接安卓设备和打印机，这里我使用的是uniapp

1. /**
2. * 调用tcp通信进行打印
3. * @param {buffer}  buffer       打印数据
4. * @param {object}  printerInfo  打印机对象{IP:'',PORT:''}
5. */
6. function tcpWrite(buffer, printerInfo) {
7.   var Socket = plus.android.importClass("java.net.Socket");
8.   var PrintWriter = plus.android.importClass("java.io.PrintWriter");
9.   var BufferedWriter = plus.android.importClass("java.io.BufferedWriter");
10.   var OutputStreamWriter = plus.android.importClass("java.io.OutputStreamWriter");
11.   var BufferedReader = plus.android.importClass("java.io.BufferedReader");
12.   var InputStreamReader = plus.android.importClass("java.io.InputStreamReader");
13.   var InetSocketAddress = plus.android.importClass("java.net.InetSocketAddress");
14.   //连接  注意:这里的端口一定是数字类型
15.   var sk = null
16.   try {
17.     sk = new Socket(printerInfo.IP, Number(printerInfo.PORT));
18.     sk.setSoTimeout(5000);
19.   } catch (e) {
20.     console.log(e, 'ee')
21.     uni.showToast({
22.       icon: 'none',
23.       title: '打印机连接失败'
24.     })
25.   }
26.   //发送
27.   try {
28.     var outputStreamWriter = new OutputStreamWriter(sk.getOutputStream(), "GBK");
29.     var bufferWriter = new BufferedWriter(outputStreamWriter);
30.     var out = new PrintWriter(bufferWriter, true);
31.     out.println(buffer);
32.     //关闭tcp连接
33.     out.close();
34.   } catch (e) {
35.     console.log(e, 'ee')
36.     uni.showToast({
37.       icon: 'none',
38.       title: '打印机数据传输失败'
39.     })
40.   }
41. }

复制代码

打印小票

目前我们已经可以开心的使用打印功能了，只需要组合一下打印指令即可。这里需要注意的是，如果我们在此之前设置了字符大小宽高均放大2倍，那么后面打印的字符都会被放大，所以如果后面我们想使用默认字符大小，我们还需要再次设置字符大小为默认来覆盖之前的指令

1. //这里的EscPosUtil.js就是上面封装的打印指令
3. import Esc from './EscPosUtil.js';
5. // 打印文字格式
6. let strCenter = Esc.Center(); //文字居中
7. let strLeft = Esc.Left(); //文字靠左
8. let strSize1 = Esc.Size1(); //默认文字
9. let strSize2 = Esc.Size2(17); //文字放大两倍（长宽均为两倍）
11. let printerInfo = {
12.   IP:'192.168.5.6',
13.   PORT: 9100
14. }
17. let strCmd = strCenter + Esc.Size2(17) + Esc.boldFontOn() + '测试门店'+ "\n";
18.   strCmd += strSize1 + Esc.fillLine(' ') + "\n"
19.   strCmd += strCenter + Esc.Size2(17) + Esc.boldFontOn() + '结账单-堂食'  + "\n";
20.   strCmd += strSize1 + Esc.fillLine(' ') + "\n"
21.   strCmd += strLeft + Esc.Size2(17) + "取餐号:" + '62' + "\n";
22.   strCmd += Esc.inline('桌号:' + '牡丹厅', '人数:' + '6', ' ', 2) + "\n"
23.   strCmd += Esc.boldFontOff() + strSize1 + Esc.fillLine(' ') + "\n"
24.   strCmd += strLeft + strSize1 + "订单号:" + '202305171749110001' + "\n";
26.   // 商品信息
27.   strCmd += Esc.fillAround('商品') + "\n"
28.   // 票尾
29.   strCmd += Esc.fillLine(' ') + "\n"
30.   strCmd += strCenter + '欢迎下次光临!' + "\n";
31.   strCmd += Esc.feedLines(4) + "\n"
32.   // 切纸
33.   strCmd += Esc.cutPaper()
35. tcpWrite(strCmd, printerInfo)

复制代码

打印效果（这里仅为展示，非上述代码打印）

3.USB打印机

这里我使用的是uniapp插件市场的插件，如果你了解安卓原生开发，你也可以自己制作一个原生插件，或者使用Native.js开发。使用原生插件在本地调试需要先打包“自定义调试基座”，在本地测试后再打正式包。
uni-app基于nativejs实现USB-OTG通讯 - 简书1，监听USB拔出连接，判断是否含有权限 2，获取权限后，打开设备实现连接 3，读写发送接受数据

https://www.jianshu.com/p/7c308ffcd789
uni-app官网uni-app,uniCloud,serverless

https://uniapp.dcloud.net.cn/plugin/native-plugin.html#%E6%9C%AC%E5%9C%B0%E6%8F%92%E4%BB%B6-%E9%9D%9E%E5%86%85%E7%BD%AE%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6
Android USB接口热敏小票打印机插件usbPrinter - DCloud 插件市场本插件提供安卓手机通过USB接口连接热敏小票打印机进行打印的相关功能。通过USB连接相比使用蓝牙连接更稳定。

https://ext.dcloud.net.cn/plugin?id=7757
在使用USB插件后，我们可以监听USB设备的插入和拔出，在初始化之后，我们可以进行数据通信，将上面封装的打印指令传给打印机即可
 二、网页打印

由于是网页运行在浏览器中，所以我们只能使用浏览器给我们提供的API
1.windows.print()

这个API在不同的浏览器中会有差异，其作用就是可以把网页中的body元素打印出来，如果我们不想打印整个body元素，则需要将body的innerHTML替换。使用这种方式有时有些页面样式会和打印出来的不一样，那么我们就要使用其他方式来优化。

1. //使用方法
3. document.body.innerHTML = newstr;  // 把需要打印的指定内容赋给body
4. window.print();

复制代码

1.1使用媒体查询

1. @media print {
2.   //把需要打印时才用到的样式写到这里
3.   p{
4.     font-size:16px;
5.   }
6. }

复制代码

同理，你也可以直接在CSS文件或者style标签中加上 media="print"

1. [/code][size=4]1.2监听打印事件[/size]
3. [code]//监听打印之前的事件
4. window.onbeforeprint = function() {
5.   //可以修改元素样式
6. }
9. //监听打印之后的事件
10. window.onafterprint = function() {
11.    //恢复之前的样式
12. }

复制代码

1.3分页符

  1.3.1 page-break-before  指定元素前插入分页符
  1.3.2 page-break-after  指定元素后插入分页符
值描述auto默认。如果必要则在元素后插入分页符。always在元素后插入分页符。avoid避免在元素后插入分页符。left在元素之后足够的分页符，一直到一张空白的左页为止。right在元素之后足够的分页符，一直到一张空白的右页为止。inherit规定应该从父元素继承 page-break-after 属性的设置。

1. 您不能对绝对定位的元素使用此属性。
2. 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
3. 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。
4. Firefox，Chrome和Safari不支持属性值"avoid"，"left"和"right"。.

1. @media print {
2.     footer {page-break-after: always;}
3. }

复制代码

1.3.3 page-break-inside  设置是否在指定元素中插入分页符 
值描述auto默认。如果必要则在元素内部插入分页符。avoid避免在元素内部插入分页符。inherit规定应该从父元素继承 page-break-inside 属性的设置。

• 您不能对绝对定位的元素使用此属性。
  
• 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
  
• IE8 及更早IE版本不支持 "inherit" 属性。
  
• Firefox, Chrome, 以及 Safari 不支持属性值 "avoid".
  

1. //避免在 <pre> 与 <blockquote> 元素中插入分页符:
3. @media print {
4.     pre, blockquote {page-break-inside: avoid;}
5. }

复制代码

1.4设置纸张

@page:  用来设置页面大小、边距、方向等

1. //portrait：纵向；  landscape: 横向
3. @page {
4.     size: A4 portrait;  //设置纸张及其方向    这里表示使用A4纸张，打印方向为纵向
5.     margin: 3.7cm 2.6cm 3.5cm; //设置纸张外边距
6. }
8. // 去除页眉
9. @page { margin-top: 0; }
11. // 去除页脚
12. @page { margin-bottom: 0; }

复制代码

 值得注意的是，如果我们使用的打印机是黑白打印的，比如针式打印机，那么我们使用的颜色最好是 #000，如果使用 #999这种灰色，打印效果会很不清晰

本文转载于:

https://juejin.cn/post/7237316724739457061

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17435607.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！