打印遇到的一些问题及解决措施

element ui: 2.11.1

操作系统:windows10

Table of Contents

问题描述

1.element ui table使用boder模式的时候线条不明显，表头线条会多出来

2.boder线框只显示一部分,呈现断开

解决措施

1.element ui table不使用border模式

2自定义table 线框

最后打印如下图

代码

html片段

  <div class="table-box">
            <div >
              <div class="content-item content-item1">品名</div>
              <div class="content-item content-item2">件数</div>
              <div class="content-item content-item3">单价</div>
              <div class="content-item content-item3">销售金额</div>
            </div>
            <div class="content" v-for="item in mutiItem.products" :key="item.id">
              <div class="content-item content-item1">{{item.productName}}</div>
              <div class="content-item content-item2">{{item.productAmount}}</div>
              <div class="content-item content-item3">{{(item.productPrice/100).toFixed(2)}}</div>
              <div class="content-item content-item3">{{(item.productAmount*item.productPrice/100).toFixed(2)}}</div>
            </div>
            <div >
              <div class="content-item content-item1">合计</div>
              <div class="content-item content-item2">{{mutiItem.totalNum}}</div>
              <div class="content-item content-item3"><span style="visibility: hidden;">x</span></div>
              <div class="content-item content-item3">{{(mutiItem.totalMoney/100).toFixed(2)}}</div>
            </div>
          </div>

css片段

    .table-box {    margin: 0 auto;    margin-right: 130px;    border: 2px solid #000;    border-bottom: none;    border-left: none;    font-size: 0;  }
  .content-item {    display: inline-block;    font-size: 24px;    border-left: 2px solid #000;    border-bottom: 2px solid #000;    box-sizing: border-box;    text-align: center;  }
  .content-item1 {    width: 50%;  }
  .content-item2 {    width: 10%;  }
  .content-item3 {    width: 20%;  }

如何设置chrome静默打印？

https://www.suanliutudousi.com/2020/02/09/chrome-slient-print/