使用 Angular md-card 和 md-color 打印表格答案

【问题标题】：Print table with Angular md-card and md-color使用 Angular md-card 和 md-color 打印表格
【发布时间】：2018-01-26 01:27:08
【问题描述】：

您好，我正在尝试打印一个填充了 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;
      };

【问题讨论】：

标签： javascript angularjs printing

【解决方案1】：

我能够找出问题所在，当使用 angular 创建新页面时，请确保您的所有依赖项都包含在 Framedoc.document.write 中，并确保没有发生语法错误。在我的情况下，这是我拥有一切的问题，但是我缺少一个 html 标签！希望这对遇到类似问题的人有所帮助！

【讨论】：