CODEWITHSUNDEEP
javascriptreactjs
khadeeja
khadeeja

Reputation: 175

Browser Print a custom html in React js

I am getting a HTML div from an API response and I want to send that response to the browser print command at a click of a button. Usually, window.print() works if you want to print the current page. But my current page has a different UI and the page I want to print is different. Any suggestion on how we can do this in React js?

Changing the current page and calling window.print() doesn't look like a feasible solution. The UI doesn't look that way. Any other solution appreciated. Thank you.

Upvotes: 0

Views: 8758

Answers (2)

Kripa Pandey
Kripa Pandey

Reputation: 1

use this media query to customise you print content

@media print { .printable-element { display: inline-block !important; //adjust accordingly margin: 0px !important; //adjust accordingly transform: scale(0.5) !important; //adjust accordingly height: 100%; //adjust accordingly page-break-before: avoid; } .hidden-on-print { display: none !important; } }

wrap your content with printable-element class name , whatever content you want to print . If you do not want to print any data use "hidden-on-print" class name to wrap your content

Upvotes: 0

pzutils
pzutils

Reputation: 530

You might consider a package like https://www.npmjs.com/package/react-to-print

or check out this existing answer: How to print React component on click of a button?

Upvotes: 1

Related Questions