Set print iframe width/height to page viewport (#553)

Without this the browser sets the iframe to its default size of width 300px x length 150px, which could cause the browser to print the components differently if there are styles present that change the content based on viewport size.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

.gitignore

@@ -27,6 +27,9 @@ node_modules
 # Optional npm cache directory
 .npm
 
+# Project npm config file
+.npmrc
+
 # Build Data
 dist/*
 es/*

examples/ComponentToPrint/index.tsx

@@ -56,9 +56,7 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
           rel="stylesheet"
           href="../disabled.css"
         />
-        <style type="text/css" media="print">{"\
-   @page {\ size: landscape;\ }\
-"}</style>
+        <style type="text/css" media="print">{"@page { size: landscape; }"}</style>
         <div className="flash" />
         <table className="testClass">
           <thead>

examples/styles/index.css

@@ -15,9 +15,15 @@
 }
 
 .relativeCSS {
- border: solid 1px #FF0000;
+  border: solid 1px #FF0000;
 }
 
 .testClass {
   background: rgba(76, 175, 80, 0.3);
 }
+
+@media (max-width: 600px) {
+  .testClass {
+    color: rebeccapurple;
+  }
+}

src/index.tsx

@@ -215,6 +215,8 @@ export default class ReactToPrint extends React.Component<IReactToPrintProps> {
         }
 
         const printWindow = document.createElement("iframe");
+        printWindow.width = `${document.documentElement.clientWidth}px`;
+        printWindow.height = `${document.documentElement.clientHeight}px`;
         printWindow.style.position = "absolute";
         printWindow.style.top = "-1000px";
         printWindow.style.left = "-1000px";