可打印的 html 不会在 Firefox 上打破新页面答案

【问题标题】：Printable html is not breaking new page on Firefox可打印的 html 不会在 Firefox 上打破新页面
【发布时间】：2016-12-01 14:07:34
【问题描述】：

我正在尝试创建一个 html 报告，我想打印它。为此，我使用了 AngularPrint (https://github.com/samwiseduzer/angularPrint)。

我的问题是，在 Firefox 上，报告打印在唯一页面中，但内容溢出到页面外。

如果我用谷歌浏览器测试，当同一个报告自动创建一个新页面以避免内容溢出时。

我尝试使用原生 window.print，就像它一样（但它发生了同样的事情）：

$scope.printReport = function(myhtml) {
  var content = document.getElementById(myhtml).innerHTML;
  var original = document.body.innerHTML;        
  document.body.innerHTML = content;
  window.print();
  document.body.innerHTML = original;
}

我使用 AngularPrint 的 html 代码：

<!-- printable area -->
<div class="content" print-section>
   ...
   ...
</div>

打印按钮：

<button class="btn btn-success" id="btnPrinReport" print-btn> Print Data </button>

【问题讨论】：

标签： javascript angularjs firefox printing

【解决方案1】：

您是否尝试过使用 css 媒体查询而不是替换 dom？应该是这样的

@media print
{
  .content{
     position:fixed;
     top:0;
     left:0;
     min-width:100vw;
     min-height:100vh;
   }
}

在你的 java 脚本中只需要做这样的事情

$scope.printReport = function(myhtml) {
 window.print();
}

【讨论】：

感谢您的回答。我试过这样做，我的表（显示数据）没有显示。