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

2020-2-9 16:34:15 316 views

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

element ui: 2.11.1

操作系统:windows10

问题描述

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/

0

No Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。