jquery - 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>

标签： jqueryangularjsprintthis

Answer 1

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

例如css：

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