printThis.js没有选择正确的表输入值

Question

我正在使用printThis.js在angularJs应用程序中打印表。除了表格中具有由角度动态填充的输入的列之外，所有内容都打印得很好（整个表格无论如何都由角度填充）。

这是打印前的列的屏幕截图，其中包含预期值：

这是我打印时相同表格和列的屏幕截图：

如您所见，它需要一个值并在所有其他输入中重复它。可能导致这种情况的原因是什么？我能避免它吗？

打印代码非常基本我在打印时看不到只会影响这些特定输入的内容：

$('#printAll').on("click", function () {
      $('#allReports').printThis({
                debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            loadCSS: "components/css/styles.css",
            pageTitle: "Termly Assesment Report",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
      });
    });

有问题的表列数据是：

<td class="remarks double-border">
    <span>{{item.remarks}}</span>
    <input ng-show="!isPrinting" type="text" name="remarks" class="form-control" ng-model="item.remarks" readonly style="background-color:#ffffff;" />
</td>

Answer 1

printThis.js正在使用临时iFrame来打印所需的jQuery选择器。因此，它将所有相关的DOM元素（包括CSS样式表）添加到帧内容中。很可能这会导致Angular和数据绑定出现一些问题。我建议丢弃printThis.js并简单地使用打印CSS样式表。在那里，您可以隐藏打印输出中不需要的所有元素。

例如css：

@media print {
   .header, .nav, .footer {
      display: none;
   }
}