Show html as a new tab for print

user_11696691 0
Viewed 148

In my app when the user clicks on a certain button, i will call an API and the API returns an HTML as a response, this HTML is a page (with and image and a few text) and i want to show this HTML in a new tab to my user and i also want to offer the user to print this page, how can i achieve this?
I tried windows.open but i'm not sure how i can use the response's HTML as the source for this page.
Is it even possible to do something like this in ReactJS ?

reactjs html javascript
1 Answers

The best solution I can think about is creating an hidden container under your body element and placing your HTML into it. Then use the @media print magic to hide the page's content and display the printing element only.

For example:

<html>
    <head>
        <title>This is my amazing title</title>
        <style>
            #print-section {
                display: none;
            }

            @media print {
                body > * {
                    display: none;
                }

                #print-section {
                    display: block;
                }
            }
        </style>
    </head>
    <body>
        <h1>A lot of content</h1>
        <p>A lot of text will be displayed here</p>

        <div id="print-section">
            <!-- HTML code will be rendered into this section -->
        </div>
    </body>
</html>
user_61112960
Related