Print react components with styles

user_2240163 0
Viewed 92

Im trying to print a dashboard. I have setup a container with an id to be able todo so. The printing does work, but it ends up ignoring all set styles and also the Grid layout.

How can I get it to print with the Bootstrap grid and styling? Styles are located in a separate css file.

printDashboard(){
    let printContents = document.getElementById('dashboard_container').innerHTML;
    let w = window.open();
    w.document.write(printContents);
    w.print();
    w.close();
},
reactjs javascript
1 Answers

Here is a solution.
You can include the file from an external location.
Then set a timeout before printing to give the styles a chance to be implemented.

printDashboard(){
    let printContents = document.getElementById('dashboard_container').innerHTML;
    let w = window.open();
    w.document.write('<link rel="stylesheet" href="./css/app.css" type="text/css" />');
    w.document.write(printContents);
    setTimeout(function(){w.print();},1000);
    w.print();
    w.close();
},
user_22401630
Related