print-is网页打印

1、安装

npm install print-js --save

2、引入

import print from 'print-is'

3、使用

<div style="display: none;">
    <div id='printBill'>
      <div style="font-size: 15px;">
        <div style="width: 100%;text-align: center;margin-top: 30px;font-size: 30px;">物业 收款收据</div>
        <div style="margin-top: 15px;display: flex;width: 100%;">
          <div style="width: 70%;">房号：物业->区域1->B3->1616</div>
          <div style="width: 30%;text-align: right;margin-right: 30px;">付款方式：物业线下</div>
        </div>
        <div style="margin-top: 15px;display: flex;width: 100%;">
          <div style="width: 33%;">业主：劳小姐</div>
          <div style="width: 33%;">票据单号：010156847589</div>
          <div style="width: 34%;text-align: right;margin-right: 30px;">开票日期：2022-07-18</div>
        </div>
      </div>

    </div>
  </div>


<el-button type="primary"  @click="billPrintClick">打印</el-button>



    //打印
     billPrintClick(){
      const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
      printJS({
        printable: 'printBill',// 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        scanStyles:false,//打印必须加上，不然页面上的css样式无效
        style
      });
    },