Printing React Components

Printing React Components

July 06, 2018




Printing React Components

Recently I had an issue which required me to either generate a PDF or print a react component from a button click. I decided to go with the latter, and try and print a react component. I have been working on an ecommerce site using React, and I was required to be able to print an Order in a very specific way.

How does print() work?

Using print() allows a user to print off the current page's screen. Unfortunately you dont always want to be able to do that, and you may only want to print off a small portion of the site.

How to do it?

Lets start by creating our simple React Component call it MyPrintableComponent.js that we will print:


import React from 'react'
export default class MyPrintableComponent extends React.Component { render () { return ( <div id={this.props.printableId}> <h1>IM GUNNA PRINT</h1> </div> ) } }

Here we are going to assume that we will be passing in a printableId for referencing.

Now lets set up where we will be printing from by creating our root element OrderComponent.js:


import React from 'react'
import MyPrintableComponent from 'MyPrintableComponent'
import 'styles.scss'
export default class OrderComponent extends React.Component { printOrder = () => { const printableElements = document.getElementById('printme').innerHTML; const orderHtml = '<html><head><title></title></head><body>' + printableElements + '</body></html>' const oldPage = document.body.innerHTML; document.body.innerHTML = orderHTML; window.print(); document.body.innerHTML = oldPage } render () { return ( <div className='container'> <div onClick={() => this.printOrder()}> Print Order </div> <MyPrintableComponent printableId='printme'> </div> ) } }

Now before I go and explain lets do something so that MyPrintableComponent does not appear unless we print. So in order to do that we will need to create a stylesheet. I'll use sass for this example. Call it styles.scss and import it into your component. Edit it so that we can give it some interesting things


#printme {
    display: none;
}
@media print {
    #printme {
        display: block;
    }
}

These few lines of code are awesome, when print is called our PrintableComponent will be rendered.

Back to our OrderComponent in the printOrder function we generate our printable html block by getting the PrintableComponent's id that we specified in our case 'printme'. We then create a reference to the original pages content and set it to a variable const oldPage in order to restore our page back to how it was. We then set our document's body to be the new page document.body.innerHTML = orderHTML; and then print our current window. This will pop up the print modal that is built into most browsers, and you will see our MyPrintableComponent and nothing from OrderComponent's container. Awesome right! Right after the window.print(); we set our document body back to our old page and boom its like nothing has changed.

So there you go, you can now create printable React Components