vue打印收据

1、安装

npm install print-js --save

 

2、引入

import print from 'print-is'

 

3、使用

 <!-- 打印 -->
  <div style="position: absolute;bottom: 100px;left: 500px;width: 700px;display: none;">
    <div id='printBill'>
      <div style="font-size: 13px;color: #000000;">
        <div style="width: 100%;text-align: center;margin-top: 30px;font-size: 20px;">中奥物业 收款收据</div>
        <div style="margin-top: 10px;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: 10px;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 style="margin-top:10px;line-height: 20px;">
          <table align="center" style="width: 100%;border-collapse: collapse;">
              <tr>
                  <th style="border:1px solid #000000;width: 150px;" align="center" valign="middle">收费项目</th>
                  <th style="border:1px solid #000000;width: 200px;" align="center" valign="middle">计费周期</th>
                  <th style="border:1px solid #000000;width: 90px;" class="ddd" align="center" valign="middle">面积</th>
                  <th style="border:1px solid #000000;width: 90px;" align="center" valign="middle">数量</th>
                  <th style="border:1px solid #000000;width: 90px;" align="center" valign="middle">单价</th>
                  <th style="border:1px solid #000000;width: 90px;" align="center" valign="middle">违约金</th>
                  <th style="border:1px solid #000000;width: 90px;" align="center" valign="middle">金额</th>
              </tr>
              <tr v-for="it in indexs">
                  <td style="border:1px solid #000000;" align="center" valign="middle">住宅物业服务费</td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">20220701-20220731</td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">100</td>
                  <td style="border:1px solid #000000;" align="center" valign="middle"></td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">4</td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">0.00</td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">400</td>
              </tr>
              <tr>
                  <td style="border:1px solid #000000;" align="center" valign="middle">合计（大写）</td>
                  <td style="border:1px solid #000000;text-align: left;" colspan="4" align="center" valign="middle">
                    <span style="margin-left: 5px;">肆佰元整</span>
                  </td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">合计（小写）</td>
                  <td style="border:1px solid #000000;" align="center" valign="middle">400</td>
              </tr>
              <tr>
                  <td style="border:1px solid #000000;" align="center" valign="middle">备注</td>
                  <td style="border:1px solid #000000;text-align: left;" colspan="6" align="center" valign="middle">
                    <span style="margin-left: 5px;">您好，欢迎</span>
                  </td>
              </tr>
          </table>
        </div>
        <div style="width: 70%;margin-top: 20px;">说明：第一联为存根（白色），第二联为客户（红色），第三联为记账（黄色）</div>
        <div style="margin-top: 10px;display: flex;width: 100%;">
          <div style="width: 33%;">开票人：张三</div>
          <div style="width: 33%;">收款人：张三</div>
          <div style="width: 34%;text-align: right;margin-right: 150px;">收款单位（盖章）</div>
        </div>
        <div style="margin-top: 10px;display: flex;width: 100%;">
          <div style="width: 33%;"></div>
          <div style="width: 33%;"></div>
          <div style="width: 34%;text-align: right;margin-right: 60px;">
            打印时间：2022-07-18 12:10:23
          </div>
        </div>
      </div>


    </div>
  </div>

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