Question

我遇到一个问题，我已经安装了BIXOLON打印机，并希望通过它打印收据。已经使用Java脚本进行打印，但是打印页面尺寸太大。

内部HTML

<div id="divToPrint" class="invoice p-3 mb-3" style="max-height:100%">


<div class="row">
    <div class="col-12">
      <h4 style="text-align:center">
        <img src="<?php echo base_url()?>assets/dist/img/AdminLTELogo.png" class="img-responsive" style="max-width:100px;margin:0 auto;display:block"> 
        <br>
      </h4>
    </div>
  </div>
  <div class="row invoice-info">
    <div class="col-sm-4 invoice-col">
    </div>
    <div class="col-sm-4 invoice-col">
    </div>
    <div class="col-sm-4 invoice-col">
      <b>Invoice #<?php echo date('M Y').'-'.$id?></b><br>
      <br>
      <b>Payment:</b> <?php $amount?><br>
      <b>Duration:</b> <?php echo $duration ?>
    </div>
  </div>
  <div class="row">
    <div class="col-12 table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Qty</th>
            <th>Station</th>
            <th>Serial</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>        
          <tr>
            <td>1</td>
            <td><?php echo $stationTitle; ?> </td>
           <td><?php echo$ id?></td>
           <td><?php echo $amount?></td>
         </tr>
       </tbody>
     </table>
   </div>
 </div>
 <div class="row">
  <div class="col-6">
  </div>
  <div class="col-6">
    <p class="lead">Date <?php echo date('d M Y')?></p>
    <div class="table-responsive">
      <table class="table">
        <tr>
          <th style="width:50%">Total:</th>
          <td><?php $amount?></td>
        </tr>
      </table>
    </div>
  </div>
</div>
</div>

这是我的Java脚本代码：

function PrintDiv() {    
   var divToPrint = document.getElementById('divToPrint');
   var popupWin = window.open('', '_blank', 'width=400,height=300');
   popupWin.document.open();
   popupWin.document.write('<html><body style="width: 58mm " onload="window.print()">' + divToPrint.innerHTML + '</html>');
    popupWin.document.close();
}

还附带了一张图像。想要打印一张简短的收据以限制高度。

谢谢。

Answer 1

很难说，因为您还没有提供内部div html和样式。

但是，请尝试以下操作：

<body style="width: 58mm; height: 120mm; overflow: hidden;" onload="window.print()">

打印收据CSS

1 个答案: