2021/04/30 window.print()不想打印页面某些部分

• 背景：比如页面如下，点击打印按钮后，不需要按钮显示在打印页面上
  –页面
  –打印预览框
  
  –

---

–有两种实现效果。
第一种，页面上‘打印’按钮一直存在
第二种，打印前按钮存在，打印后按钮不显示在页面上

---

• 第一种：打印按钮一直在页面上，只是调用点击方法时不显示在打印预览框内
  –效果图
  
  –代码
  主要是css设置，display: none;

//1.在template中  自定义样式noprint
<div class="print-footer noprint">
      <dm-button type="primary" @click="print">打 印</dm-button>
      <dm-button type="primary" @click="goPre">取 消</dm-button>
</div>

//2.在@media print中给noprint设置为 display: none;
@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
  @page {
    margin: 0 !important; // 去除浏览器默认页眉页脚
    size: A4 landscape;
  }
  
  //不显示按钮
  .noprint {
    display: none;
  }
}

---

• 第二种，点击打印弹出预览框后，按钮消失，不允许再次打印
  –代码
  主要是使用window.onafterprint()方法，在打印结束后会执行该方法内代码

//1.template 用printing来控制显隐
<div
      style="text-align: center; margin-top: 30px"
      :class="{ none: printting }"
    >
      <div>
        <button class="btn primary-btn" @click="goPrint">打印</button>
        <button class="btn second-btn" @click="goPre">取消</button>
      </div>
</div>

//2.data
data() {
    return {
      settleInfo: {}, //文字描述
      printting: false,
      imgCode: "", //二维码地址
    };
},

//3.methods中的打印方法
goPrint(){
      this.printting = true;
}

//4.window.onafterprint()方法 可以写在mounted中，也可以现在created中
mounted() {
    let that = this;
    //在页面打印后执行
    window.onafterprint = () => {
      that.printting = true;
       location.reload();
    };
},