Print with table styles

Signed-off-by: Yousef Sultan <[email protected]>

Author: Yousef Sultan

docs/css/app.css

@@ -32,32 +32,6 @@
 				><i class="material-icons">menu</i></a>
 			</div>
 			<ul id="nav-mobile" class="sidenav sidenav-fixed">
-				<li class="logo">
-					<img
-						src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/512px-Vue.js_Logo_2.svg.png"
-						width="40px"
-						height="40px"
-					>
-				</li>
-				<!-- <li class="version">
-          <a href="#" data-target="version-dropdown" class="dropdown-trigger">
-            1.0.0
-          </a>
-          <ul id="version-dropdown" class="dropdown-content">
-            <li><a>1.0.0</a></li>
-            <li>
-              <a href="http://archives.materializecss.com/0.100.2/">0.100.2</a>
-            </li>
-          </ul>
-        </li> -->
-				<!-- <li class="search">
-          <div class="search-wrapper">
-            <input id="search" placeholder="Search" /><i class="material-icons"
-              >search</i
-            >
-            <div class="search-results"></div>
-          </div>
-        </li> -->
 				<li class="bold">
 					<a href="#basic" class="waves-effect waves-teal">Basic Example</a>
 				</li>
@@ -76,14 +50,6 @@
 				<li class="bold">
 					<a href="#row-buttons" class="waves-effect waves-teal">Row buttons</a>
 				</li>
-				<!-- <li class="bold">
-          <a href="themes.html" class="waves-effect waves-teal"
-            >New FunFunc!<span
-              data-badge-caption="updated"
-              class="new badge"
-            ></span
-          ></a>
-        </li> -->
 			</ul>
 		</header>
 

docs/js/app.js

@@ -1,5 +1,5 @@
 <template>
-	<div class="card material-table">
+	<div class="card material-table" ref="table">
 		<div class="table-header">
 			<span class="table-title">{{ title }}</span>
 			<div class="actions">
@@ -334,9 +334,26 @@
 			},
 
 			print() {
-				let win = window.open('');
-				win.document.write(this.renderTable());
+				const clonedTable = this.$refs.table.cloneNode(true);
+				this.synchronizeCssStyles(this.$refs.table, clonedTable, true);
+
+				clonedTable.style.maxWidth = '100%';
+				clonedTable.style.boxShadow = '0px 0px 0px 1px rgba(0,0,0,0.2)';
+				clonedTable.style.margin = '8px auto';
+				clonedTable.querySelector('.actions').remove();
+				clonedTable.querySelector('.material-pagination').remove();
+				clonedTable.querySelector('.datatable-length').remove();
+
+				clonedTable.querySelectorAll('button').forEach(n => n.remove());
+
+				let win = window.open('', '');
+
+
+				win.document.body.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+				win.document.body.innerHTML = (clonedTable.outerHTML);
+
 				win.print();
+
 				win.close();
 			},
 
@@ -393,6 +410,45 @@
 				else
 					return undefined;
 			},
+
+			/* https://codebottle.io/s/31b70f5391
+			 *
+			 * @author: Luigi D'Amico (www.8bitplatoon.com)
+			 */
+			synchronizeCssStyles(src, destination, recursively) {
+				destination.style.cssText = this.getComputedStyleCssText(src);
+
+				if (recursively) {
+					const vSrcElements = src.getElementsByTagName('*');
+					const vDstElements = destination.getElementsByTagName('*');
+
+					for (var i = vSrcElements.length; i--;) {
+						const vSrcElement = vSrcElements[i];
+						const vDstElement = vDstElements[i];
+						vDstElement.style.cssText = this.getComputedStyleCssText(vSrcElement);
+					}
+				}
+			},
+
+			// https://gist.github.com/johnkpaul/1754808
+			//
+			// Please delete Firefox.
+			getComputedStyleCssText(element) {
+				const cssObject = window.getComputedStyle(element);
+				const cssAccumulator = [];
+
+				if (cssObject.cssText !== ''){
+					return cssObject.cssText;
+				}
+
+				for (let prop in cssObject){
+					if (typeof cssObject[prop] === 'string'){
+						cssAccumulator.push(prop + ' : ' + cssObject[prop]);
+					}
+				}
+
+				return cssAccumulator.join('; ');
+			},
 		},
 
 		computed: {