Printing from create-react-app

JavaScript
1

Hi there,

I’m having trouble printing from a react app created on nodeJs with “create-react-app”.
My css file is importing as usual: import ‘./App.css’;
Here is my code for printing:

  printElem(divId) {
    var content = document.getElementById(divId).innerHTML;
    var mywindow = window.open('', 'Print', 'height=600,width=800');

    mywindow.document.write('<html><head><title>Print</title><link media="all" type="text/css" rel="stylesheet" href="./App.css"/>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus()
    mywindow.print();
    mywindow.close();
    return true;
}

Everything is working ok, except for the CSS that isn’t taken in account. I guess there is some problem in the href="./App.css" , I’m not quite sure how create-react-app works internally and I guess it can’t access my file?

Thanks in advance

2

You’re not using React at all here, how CRA does things is irrelevant. You open a new window and write to the document. Is the URL you provide here correct: “./App.css” (this isn’t a rhetorical question, you need to check because I think you’re going to need to provide a full path)

3

React uses states and JSX, so this way seems a bit odd of handeling it. Normally you make components that you append to a root node.

If you create a new file you need to check the path of App.css if you itend to use that stylesheet.
Also to use react you need to import react in your component.

4

printElem is a method of my react Presentational component, I call it in the render like that cmdButtons.push(<button className="button" onClick={() => this.printElem('tables')}>Imprimer</button>);

I figured the path ./App.css would work because it’s how it’s called in the top of the App.js : import './App.css';
But the Print page doesn’t seem to find it

5

It’s irrelevant where you call it, you’re literally telling the browser to create a new window then manually writing to the DOM in that window. It has nothing to do with React: once you call that method, anything that happens has nothing to do with your React app.

Just to reiterate what I said before, is the URL for the CSS file correct? You need to check this, look in the browser console for that window, I assume it isn’t loading. ./App.css means that there should be a file called App.css in the same directory and same level as the HTML file that references it

(Also side note but the import ./App.css, that’s a feature the build tool (Webpack), it’s not React or JS or anything like that)

1 Like
6

Ok I get it now, thank you very much for your answer. I’m new to all of this it’s taking some time to make sense of how everything works. The URL in the console of the print window is indeed ./App.css, and not linked to my project, I guess there should be a mean to link it to my app through localhost:3000 but it doesn’t seem like a good solution. For now I found a solution by just printing the page normally (via ctrl+P) and some @Media Print to remove what I don’t want.
Also I saw there was some npm package like react-to-print I’ll take a look at this.
Anyway thank you for helping me making sense of it!

7

I would always try to do it using the current page, optimised via a print stylesheet, for the simple reason that with your original method, you’re trying to open a popup. That just isn’t going to work for a big % of users, so it’s not generally best practice. Popups are generally blocked by default everywhere now, and need explicit permission from a user to work, and a loads of users will just not give that permission.

8