簡単レシート印刷 receiptline で仮想プリンターを使ってみた


日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。

先日落札したレシートプリンターは、セルフテストして投稿用に写真撮影しました。
IP アドレス設定中のため、[前回](https://qiita.com/dopperi46/items/7f06d5125cc6755f8235)利用した開発ツールを引き続き使います。
今回は仮想プリンターを使った印刷です。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/3dc7f402-8084-b42a-0526-7dab62b8297f.png)

# ファイルのロード

receiptline に添付されているサンプルデータを開発ツールで読み込んでみましょう。
フォルダアイコンをクリックすると、ダイアログボックスが開きます。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/69114224-0aaf-e498-3ae9-d8b3f196d575.png)

`example/data/ja/receipt.txt` を選択して、OK ボタンをクリック。
キャンセルしたいときは、ダイアログボックスの外をクリックします。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/07b2fe6c-c5d6-45a5-b63c-8a421de7eac1.png)

編集エリアにファイルがロードされました。

```text:ReceiptLine
{image:iVBORw0KGgoAAAANSUhEUgAAAIAAAAAwAQMAAADjOuD9AAAABlBMVEUAAAD///+l2Z/dAAAAZklEQVQoz2P4jwYYRrrABwYGOwYG5gMMDBUMDPxAgQcMDDJAgQYGhgJcAv//yMj//9/8//+HerAZRAsAzUASAJoGMhRF4AC6ANCIAhQz8AkAXQoUOIDidBQBkG8hAj8gAqPJAa8AAGjulhOsX97yAAAAAElFTkSuQmCC}
            市ヶ谷駅前店
    東京都千代田区九段1-Y-X

2019年 2月19日(火) 19:00
{border:line}
^領　収　証
{border:space}
{width:*,2,10}
ビール                 | 2|    ¥1,300
千鳥コース             | 2|   ¥17,280
-------------------------------------
{width:*,20}
^合計             |          ^¥18,580
現　　金          |           ¥20,000
お 釣 り          |            ¥1,420
```

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/cf88a013-628a-669f-730d-337e6c537ea5.png)

ちなみにセーブ機能はないです。コピペでファイルに保存するしかないようです。

# テスト印刷

テスト印刷は、開発ツールを Node.js で実行している必要があります。
Web ブラウザーのアドレスが `http://localhost:10080` であれば OK です。

開発ツールの右上にはテスト印刷用のボタンがあります。
`printer1` は印刷するレシートプリンターの ID です。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/d101790e-cbc7-9064-2790-c20d0eda0a76.png)

## プリンター ID

初期状態では以下のレシートプリンターが登録されています。

|プリンターID|桁数|言語|用紙排出|出力データ|
|:---|---:|:---|:---|:---|
|printer1|42|英語|なし|SVG|
|printer2|48|日本語|なし|SVG|
|printer3|48|日本語|上方向 &#x2934;|ESC/POS|
|tm_series1|42|英語|上方向 &#x2934;|ESC/POS (エプソン)|
|mc_series1|48|日本語|前方向 &#x2935;|StarPRNT (スター)|
|mc_series2|48|英語|前方向 &#x2935;|StarPRNT (スター)|
|rp_series1|48|日本語|前方向 &#x2935;|ESC/POS (セイコー)|
|ct_series1|48|日本語|前方向 &#x2935;|ESC/POS (シチズン)|
|fp_series1|48|日本語|上方向 &#x2934;|ESC/POS (富士通)|

送信先はすべて仮想プリンター (TCP ポート 19100) となっています。

## printers.json

プリンター ID と設定情報は、`printers.json` に保存されています。
host と port は通信用。他は receiptline の変換 API に渡されます。
実機で印刷するときは、このファイルを変更する必要があります。

```json:printers.json
{
    "printer1": {
        "host": "127.0.0.1",
        "port": 19100,
        "cpl": 42,
        "encoding": "cp437",
        "gamma": 1.0,
        "upsideDown": false,
        "command": "svg"
    },

    ...

    "fp_series1": {
        "host": "127.0.0.1",
        "port": 19100,
        "cpl": 48,
        "encoding": "cp932",
        "gamma": 1.8,
        "upsideDown": false,
        "command": "fit"
    }
}
```

# 仮想プリンター

送信ボタンをクリックすると、編集エリアのテキストが HTTP で Node.js へ送られて変換されます。
仮想プリンターが受信したデータは 16 進ダンプで表示されます。

`printer2` へ送信。仮想プリンターが受信したデータは SVG です。

```text
Virtual printer running at 127.0.0.1:19100
Server running at http://127.0.0.1:10080/
Virtual printer received:
00000000  3c 73 76 67 20 77 69 64  74 68 3d 22 35 37 36 70  <svg width="576p
00000010  78 22 20 68 65 69 67 68  74 3d 22 33 36 30 70 78  x" height="360px
00000020  22 20 76 69 65 77 42 6f  78 3d 22 30 20 30 20 35  " viewBox="0 0 5
00000030  37 36 20 33 36 30 22 20  70 72 65 73 65 72 76 65  76 360" preserve
00000040  41 73 70 65 63 74 52 61  74 69 6f 3d 22 78 4d 69  AspectRatio="xMi
00000050  6e 59 4d 69 6e 20 6d 65  65 74 22 20 78 6d 6c 6e  nYMin meet" xmln
00000060  73 3d 22 68 74 74 70 3a  2f 2f 77 77 77 2e 77 33  s="http://www.w3
00000070  2e 6f 72 67 2f 32 30 30  30 2f 73 76 67 22 20 78  .org/2000/svg" x
...
00000e70  2c 33 36 30 29 22 3e 3c  74 65 78 74 20 78 3d 22  ,360)"><text x="
00000e80  30 2c 32 34 2c 33 36 2c  36 30 2c 37 32 22 3e e3  0,24,36,60,72">.
00000e90  81 8a 26 23 78 61 30 3b  e9 87 a3 26 23 78 61 30  ..&#xa0;...&#xa0
00000ea0  3b e3 82 8a 3c 2f 74 65  78 74 3e 3c 74 65 78 74  ;...</text><text
00000eb0  20 78 3d 22 35 30 34 2c  35 31 36 2c 35 32 38 2c   x="504,516,528,
00000ec0  35 34 30 2c 35 35 32 2c  35 36 34 22 3e c2 a5 31  540,552,564">..1
00000ed0  2c 34 32 30 3c 2f 74 65  78 74 3e 3c 2f 67 3e 3c  ,420</text></g><
00000ee0  2f 67 3e 3c 2f 73 76 67  3e 0a                    /g></svg>.
```

`printer3` へ送信。仮想プリンターが受信したデータは ESC/POS です。

```text
Virtual printer running at 127.0.0.1:19100
Server running at http://127.0.0.1:10080/
Virtual printer received:
00000000  1b 40 1d 61 00 1b 4d 30  1c 28 41 02 00 30 00 1b  .@.a..M0.(A..0..
00000010  20 00 1c 53 00 00 1b 33  00 1b 7b 00 1b 2d 30 1c   ..S...3..{..-0.
00000020  2d 30 1b 45 30 1d 42 30  1d 21 00 1d 4c 00 00 1d  -0.E0.B0.!..L...
00000030  57 40 02 1b 61 01 1d 38  4c 0a 03 00 00 30 70 30  W@..a..8L....0p0
00000040  01 01 31 80 00 30 00 00  00 00 00 00 00 00 00 00  ..1..0..........
00000050  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  ................
00000060  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  ................
00000070  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  ................
...
000007b0  52 08 5c 32 30 2c 30 30  30 0a 1b 2d 30 1c 2d 30  R.\20,000..-0.-0
000007c0  1b 45 30 1d 42 30 1d 21  00 1d 4c 00 00 1d 57 40  .E0.B0.!..L...W@
000007d0  02 1b 61 00 1b 24 00 00  1b 5c 00 00 1b 2d 30 1c  ..a..$...\...-0.
000007e0  2d 30 1b 45 30 1d 42 30  1d 21 00 1b 74 01 1c 43  -0.E0.B0.!..t..C
000007f0  31 1b 52 08 82 a8 20 92  de 20 82 e8 1b 24 50 01  1.R... .. ...$P.
00000800  1b 5c a8 00 1b 2d 30 1c  2d 30 1b 45 30 1d 42 30  .\...-0.-0.E0.B0
00000810  1d 21 00 1b 74 01 1c 43  31 1b 52 08 5c 31 2c 34  .!..t..C1.R.\1,4
00000820  32 30 0a 1d 56 42 00 1d  72 31                    20..VB..r1
```

コマンドを見ても、ちょっとわからないですよね・・・

次回は落札したレシートプリンターで印刷します！