Question

我有类似的问题。我有表格，打印得很好，但不是在Firefox上。

我的代码看起来像

<div>
 <div>
  <fieldset ng-disabled="!isDocumentEditable">
   A LOT OF Inputs (like 200) - most of them are table of checkboxes
   And a lot of other controls
  </fieldset>
 </div>
</div>

现在，如果文档是可编辑的，我想让用户进行编辑。如果不是 - 我不想要 - 这很简单。

但是......我的表格很长，不会进入第二页。所以我做了这样的事情：

<body onbeforeprint="beforePrintForFirefox()">
  The whole document
</body>
<script>
    function beforePrintForFirefox() {
        var fieldset = document.getElementsByTagName( 'fieldset')[0];
        var div = document.createElement( 'div');
        div.className = "fieldset";
        div.innerHTML = fieldset.innerHTML;
        fieldset.parentNode.appendChild(div);
        fieldset.parentNode.removeChild(fieldset);
    }
</script >

但是......它打破了我的整个形式 - 我的意思是当我将fieldset更改为div时 - 控件停止被禁用 - 因为我无法将ng-disabled设置为div。

我尝试使用相同的功能：afterPrintForFirefox - 将div转换为fieldset - 但我不认为这是个好主意。

以下是问题：如何将字段集更改为div仅用于打印目的 - 而不是真正的HTML文档？

编辑：div.className =＆＃34; fieldset＆＃34 ;;我的想法是隔离＆＃39; fieldset＆＃39; div到其他div。我不确定这是不是很好的解决方案

Answer 1

所以，这是我的解决方案：我已将整个公式拆分为3个字段集，因此如果文档太长，它仍然会在firefox中打印（但在3个单独的字段中 - 所以...不太好但可以接受）。

然后，我写了一些css到firefox和打印，比如禁用一些不应该打印的部分，如：

@media print {
@-moz-document url-prefix() {
    .disableFirefoxPrint {
        display: none;
    }
}

我通过添加.disableFirefoxPrint类来格式化有问题的div。

所以，这不是最好的解决方案 - 但它确实有效。

编辑：“onbeforeprint”解决方案是个坏主意 - 因为它改变了我的HTML并打破了它。

将fieldset替换为div，反之亦然，仅用于在firefox中打印

1 个答案: