如何从我的打印页面中删除不需要的空白区域

时间:2017-12-01 09:23:20

标签: html css

如何在打印div时从打印输出中删除不需要的空白区域。我必须打印像POS收据这样的DIV内容,但它会在顶部和底部获得额外的空白区域,我只想打印div内容。

This image with marked unwanted space

This is image of current printing receipt



@media print {
  @page {
    size: 100mm 150mm;
  }
}

<div>
  <center>
    <div>Job Sheet</div>
    <h2>
      <b>My Company Name</b>
      <br/>

      <small>My Address here</small><br/>
      <small>1234567890, 1234567890</small><br/>
    </h2>
    <hr/>

    <table align="center">
      <tr>
        <td class="printHeading"><b>Date: </b></td>
        <td id="date1" class="printHeading">000-00-00 00:00:00</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Job No: </b></td>
        <td id="caseid1" class="printHeading">fgnfg</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Name: </b></td>
        <td id="name1" class="printHeading">fgnfgn</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Address: </b></td>
        <td id="address1" class="printHeading">fgnfg</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Mobile: </b></td>
        <td id="mobile1" class="printHeading">fgnfg</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Brand: </b></td>
        <td id="brand1" class="printHeading">fgnfgn</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Model: </b></td>
        <td id="model1" class="printHeading">fgsfg</td>
      </tr>
      <tr>
        <td class="printHeading"><b>IMEI Number: </b></td>
        <td id="imei_number1" class="printHeading">75375732</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Problem: </b></td>
        <td id="problem1" class="printHeading">fgjdfgdfg</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Amount: </b></td>
        <td id="totalAmount1" class="printHeading">535</td>
      </tr>
      <tr>
        <td class="printHeading"><b>Assessories: </b></td>
        <td id="assessories1" class="printHeading">dfgdg</td>
      </tr>
    </table>

    <hr/>
    <div>T & C : NO Responsibility of data lost during service all Subject To Gwalior jurisdiction </div>
  </center>
  <!-- <div>Exe Name</div> -->
  <div>

    <h5 class="pull-right">Customer's Signature</h5>
  </div>

</div>

This is my java script function

function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

我认为这个问题可能有多种原因。 一方面,打印机驱动程序可能存在问题。可能页面设置为驱动程序中的特定高度,并且您的内容只是在页面上居中,也许您已将边距设置为3厘米左右,这在A4纸上有意义但在收据上没有。

此外,您的CSS文件看起来有点短。我建议总是来输入类似

的内容
*{
  padding: 0px;
  margin: 0px;
}

在CSS文件的前面,然后手动设置所有边距,以避免浏览器和打印机驱动程序可能会做的一些奇怪的事情......

答案 1 :(得分:0)

您好请使用以下链接代码: [https://plnkr.co/edit/sQiJfyaZYbFtChXWAjRn?p=preview][1]

或仅更改此内容:

@media print {
  @page {
    size: 10mm 20mm;
  }
}

答案 2 :(得分:0)

我用Google搜索了一下,看起来好像是浏览器打印页脚问题。

也许这会有所帮助: https://www.odoo.com/forum/help-1/question/page-size-when-printing-pos-receipts-5443

答案 3 :(得分:0)

它现在正在工作,在预览时,你会获得保证金默认值,然后我们必须在没有保证金之后才能正常工作