printThis.js未选取正确的表输入值

Question

我正在使用printThis.js在angularJs应用程序中打印一个表。除了表中有一列的输入由angular动态填充(整个表都是由angular填充的)外，所有内容都可以正常打印。

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

​

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

​

​

正如您所看到的，它接受一个值并在所有其他输入中重复该值。是什么导致了这种情况，我如何避免这种情况？

打印的代码非常基本，我看不出在打印时有什么可能只影响这些特定的输入：

$('#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，直接使用print样式表。在这里，您可以隐藏打印输出中不需要的所有元素。

以css为例：

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