CODEWITHSUNDEEP
reactjs
Niyaz
Niyaz

Reputation: 2893

initialise react component with props and return as html string

The requirement is i need to initialise a react component without updating the DOM

print() {
  let toPrint = ReactDOMServer.renderToString(<ComponentToPrint0 />); // Returns string
  toPrint += ReactDOMServer.renderToString(<ComponentToPrint1 />);
  printHandler(toPrint);
}

printHandler(htmlElement) {
    let tempWindow = window.open();
    tempWindow.document.write('<html><head><title>Print</title>');
    tempWindow.document.write('<link rel="stylesheet" href="http://localhost:9595/app/main.css" type="text/css" />');
    tempWindow.document.write('</head><body>');
    tempWindow.document.write(htmlElement);
    tempWindow.document.write('</body></html>');
    tempWindow.focus();
    tempWindow.print();
    tempWindow.close();
}

In the above ComponentToPrint0 and ComponentToPrint1 return as string, is this the better approach or anyother there ??

Upvotes: 0

Views: 41

Answers (1)

Estus Flask
Estus Flask

Reputation: 222989

It can be treated as any other React application:

const Popup = () => <>
  <head>
    <title>Print</title>
    <link rel="stylesheet" href="http://localhost:9595/app/main.css" type="text/css" />
  </head>
  <body>
    <ComponentToPrint0 />
    <ComponentToPrint1 />
  </body>
</>;

...

let tempWindow = window.open();
ReactDOM.render(<Popup/>, tempWindow.document.documentElement);
tempWindow.focus();
tempWindow.print();
tempWindow.close();

Upvotes: 1

Related Questions