Javascript 打印div可以工作，但jQuery顶部有空白

好的，我正在构建一个发票应用程序，并试图打印出一个包含发票的div。我想隐藏除包含发票内容的div之外的所有div，然后打印该div

像这样：

  // on click of print button hide all div's except invoice and then force print
    $(document).ready(function() {
      $(document).on('click', '.print_button', function() {
        $('.print_invoice').css({width: '100%'}, {height: "100%"});
        $('.hide_this').hide();
        window.print();

        // return all hidden div's on invoice click
        $('.print_invoice').click(function() {
          $('.hide_this').show();
          $(this).css({width: '83.33333333%'},{height: '60%'});
        });
      });
    });

它工作得很好，只是打印时顶部有一个很大的空白，因此它会将页脚的一部分移到第二页

像这样：

  // on click of print button hide all div's except invoice and then force print
    $(document).ready(function() {
      $(document).on('click', '.print_button', function() {
        $('.print_invoice').css({width: '100%'}, {height: "100%"});
        $('.hide_this').hide();
        window.print();

        // return all hidden div's on invoice click
        $('.print_invoice').click(function() {
          $('.hide_this').show();
          $(this).css({width: '83.33333333%'},{height: '60%'});
        });
      });
    });

---

如何删除顶部的大空白并将发票向上推，使其适合一页？您必须使用专用CSS样式表进行打印：

在那里你可以做一些重置

记住：打印时禁用打印标题选项，这会有所帮助