html打印小票的总结

html打印小票的总结

这个打印的问题困扰了两天，最开始是通过html2canvas，但是转成的图片模糊，一直得不到好的解决，于是放弃了这种思路。改用系统的打印，于是一切变得简单了，但是又出现了新的问题，就是无法控制打印的字体，在无计可施之时，随手改宽度打了两个小票，发现居然字体变小了！又改了两次发现宽度的值越大，打印到纸上的字体大小就越小，这就解决了无法控制打印字体大小的问题

首先写一下html模板

<div>
<!-- // 这里多加一层div是因为dom树中没有父级，都可以 -->
        <div class="main" id="main">
            <div class="name">入库日期：2021-01-05</div>
            <div class="name">品牌：雅培</div>
            <div class="name">效期：2021-01-05</div>
            <div class="name">物料编码：测试物料编码</div>
            <div class="name"> 批号：4445551122666 </div>
            <div class="name">名称：测试物料222</div>
            <div class="name">原厂编码：8584546654654</div>
            <div class="name">规格：测试无力哦奥委屈额群无</div>
            <div class="code">
                <img width="50" height="50" src="https://s2.loli.net/2022/01/06/hF8mtpvz4YjIiE1.png" />
            </div>
        </div>
    </div>

设置一下样式表

.main {
          /* width设置越宽，最终打印到纸上的字体越小 */
          width: 260px;
          height: 113px;
          position: relative;
          display: flex;
          flex-direction: column;
          padding: 5px;
          box-sizing: border-box;
          font-size: 6px;
          padding-left: 20px;
      }
      .name {
          width: 180px;
          height: 16px;
          font-size: 6px;
      }

      html,
      body {
          font-size: 6px;
          margin: 0;
          padding: 0;
      }