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

标签 html css

如何在打印 div 时从我的打印输出中删除不需要的空白。我必须打印 DIV 的内容,如 POS 收据,但它在顶部和底部有额外的空白,我只想打印 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;
}

最佳答案

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

此外,您的 CSS 文件看起来有点短。我建议始终放入类似

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

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

关于html - 如何从我的打印页面中删除不需要的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47590176/

相关文章:

javascript - jQuery 方法找不到选择器

javascript - 单击其中的 Bootstrap 切换按钮时如何禁用 anchor 标记单击

css - Angular Material 扩展面板描述中的文本溢出省略号动态宽度

jquery - 查看是否在 IE8 中选中了单选按钮或复选框

jquery - CSS 滑动边框

javascript - 获取属性访问权限被拒绝 "document"

html - 如何让我的应用始终占据 100% 的屏幕?

javascript - 获取 Angular ngRepeat InnerHTML

css - 在 Chrome 的 Web 检查器中显示 css 注释

javascript - 替换同名类的内部 div 中的跨度文本