簡単電子レシート receiptline で新しい罫線を使ってみた

マークダウン言語で紙のレシートや電子レシートを簡単に作れる receiptline。
https://github.com/receiptline/receiptline
https://www.npmjs.com/package/receiptline

少し前にマイナーバージョンアップがありました。
(2021年2月16日時点で Verion 1.2.1)

電子レシートの水平線や罫線が改良され、紙のレシートとほぼ同等になっています。
[過去の記事](https://qiita.com/dopperi46/items/b838ddcebe78b8b103a0)の例で比較してみましょう。

# 水平線を比較する

```text:ReceiptLine
|   商品名   |金額|
-------------------
|冷奴        | 380|
|竜田揚げ    | 480|
|もつ煮込み  | 580|
```

## 従来の水平線 (V1.0)

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/62866fe4-0542-cd48-691c-afa29f0f201d.png)

## 新しい水平線 (V1.2)

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/af1e3228-1409-7001-491a-a6a1795c2c32.png)

## 印刷結果 (TM-T88V)

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/188c916b-fe90-3f17-51ae-61aa7f231423.jpeg)

## 印刷結果 (mC-Print3)

![04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/2df5ce33-a6bd-e767-974e-0c511eaeb6e1.jpeg)

# 罫線を比較する

```text:ReceiptLine
{border:line}
|   商品名   |金額|
-------------------
|冷奴        | 380|
|竜田揚げ    | 480|
|もつ煮込み  | 580|
```

## 従来の罫線 (V1.0)

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/2eee57e5-3a47-e4ef-aaeb-5f01a41e47c3.png)

## 新しい罫線 (V1.2)

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/c2742db2-347b-3e97-4ef3-c0058fd0fbf7.png)

## 印刷結果 (TM-T88V)

![07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/b1e57f48-1d4f-62d8-4975-5635e57a1c4e.jpeg)

## 印刷結果 (mC-Print3)

![08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/dab69c90-746c-cb37-ddb2-94d6376fc3db.jpeg)

# テキストを比較する

電子レシートのテキストを選択してコピー＆ペーストした結果も変わっています。
罫線文字がなくなり、レシートデータ解析がしやすくなりました。以下は Chrome の場合です。

## 従来のテキスト (V1.0)

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/fab19375-ee69-b4b0-8fe3-48306a34f266.png)

```text
╔══════════════╦═══════════════╗
║              ║               ║
商品名
金額
╚══════════════╩═══════════════╝
╔══════════════╦═══════════════╗
║              ║               ║
冷奴
380
║              ║               ║
竜田揚げ
480
║              ║               ║
もつ煮込み
580
╚══════════════╩═══════════════╝
```

## 新しいテキスト (V1.2)

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/74152466-4d66-a8f6-f1c1-63972545411a.png)

```text
商品名
金額
冷奴
380
竜田揚げ
480
もつ煮込み
580
```

# 動くもの

[前回の記事](https://qiita.com/dopperi46/items/a557d763a39560be909e)の CodePen をアップデートしました。

<p class="codepen" data-height="960" data-theme-id="dark" data-default-tab="html,result" data-user="dopperi46" data-slug-hash="MWbpOXL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Digital Receipt by receiptline v1.2.1">
  <span>See the Pen <a href="https://codepen.io/dopperi46/pen/MWbpOXL">
  Digital Receipt by receiptline v1.2.1</a> by dopperi46 (<a href="https://codepen.io/dopperi46">@dopperi46</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

# 新しいプログラム例

[前々回の記事](https://qiita.com/dopperi46/items/2e230c322a63086ad6aa)のコードを参考にサンプルプログラムが作成されて receiptline に追加されました。
紙のレシートが必要な場合は印刷できるように拡張されています。

## 日本語版

```bash
$ node ja.js
```

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/c64efaf1-25f5-36c9-affa-56053b6f9991.png)

## 英語版

```bash
$ node en.js
```

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/fa2697f0-f8ec-4dfe-5b0f-b13a72cb11a3.png)

また何か作ったら投稿します。ではまた！