Hey there! I'm currently working on printing a table that is filled with data in an md-card. The background color is set using the md-color theme picker, which you can check out here. However, I'm encountering an issue where the printed table only shows the data without the design of the md-card and md-color. I found a sample to work with on CodePen. Any help on this matter would be greatly appreciated. Thank you!
Here's the code snippet:
<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 snippet:
$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;
};