Question

您好我正在尝试打印一张用md卡中的数据填充的表。使用md-color主题选择器（https://material.angularjs.org/1.1.0/demo/colors）设置背景。我的问题是，当拉出外部html进行打印时，md-card和md-color不会显示在表格中。该表仅显示数据而没有设计。我从这里得到了我的样本（https://codepen.io/mil/pen/WRyzLa?editors=0010）任何帮助都会非常感谢你提前!!

代码：

<table align="center" id="print-section">
            <tr ng-repeat="student in class">
                <td>
                    <md-card class="student-badge" md-colors="{background: '{{primary}}-500'}">
                        <md-card-title class="student-badge-title">
                            <md-card-title-text>
                                <span class="student-name">{{student.name}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <span class="badge" id="student-info">{{student.id}}</span>
                        </md-card-content>
                    </md-card>
                </td>
            </tr>
        </table>

使用Javascript：

$scope.print = function() {
        var contents = document.getElementById("print-section").outerHTML;
        console.log("print " + contents);
        var frame1 = document.createElement('iframe');
            frame1.name = "frame3";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><style>All styles and angular dependencies are added here</script></style>');
            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
              window.frames["frame3"].focus();
              window.frames["frame3"].print();
              document.body.removeChild(frame1);
          }, 500);
          return false;
      };

Answer 1

我能够找出问题，在使用angular创建新页面时，确保所有依赖项都包含在Framedoc.document.write中，并确保没有发生语法错误。这是我的问题，我有一切，但我错过了一个HTML标签！希望这有助于任何有类似问题的人！

使用Angular md-card和md-color打印表

1 个答案: