import React from 'react'; import { renderToString } from 'react-dom/server'; interface PrintOptions { styles?: string; printTimeout?: number; popupFeatures?: object; } export default function(element: React.ReactElement<any>, opts: PrintOptions = {}) { const options = { styles: '', printTimeout: 500, popupFeatures: {}, ...opts }; // Convert popupFeatures into a key=value,key=value string. See // https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features // for more information. const featuresStr = Object.entries(options.popupFeatures) .map(([key, value]) => `${key}=${value}`) .join(','); const popup = window.open('about:blank', 'printWindow', featuresStr); if (popup) { popup.document.open(); popup.document.write(` <html> <head> <style>${options.styles}</style> <script> setTimeout(function() { window.print(); }, ${options.printTimeout}); </script> </head> <body> ${renderToString(element)} <script> // FIXME consider if we REALLY want it var width = document.body.children[0].offsetWidth; var height = document.body.children[0].offsetHeight; window.moveTo(0, 0); // FIXME Chrome could be larger (i guess?) window.resizeTo(width + 60, height + 60); </script> </body> </html> `); } }